<%@ page language="java" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<%
    String id = request.getParameter("id");
%>
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Variant HTML Builder by Medium Rare</title>
    <link rel="stylesheet" href="css/variant-icons.css">
    <link rel="stylesheet" href="css/variant-social-icons.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">


    <link href="theme/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
    <link href="theme/css/themify-icons.css" rel="stylesheet" type="text/css" media="all">
    <link href="theme/css/pe-icon-7-stroke.min.css" rel="stylesheet" type="text/css" media="all">
    <link href="theme/css/flexslider.min.css" rel="stylesheet" type="text/css" media="all">
    <link href="theme/css/lightbox.min.css" rel="stylesheet" type="text/css" media="all">
    <link href="theme/css/theme.css" rel="stylesheet" type="text/css" media="all">
    <link href="theme/css/custom.css" rel="stylesheet" type="text/css" media="all">
    <link href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700"
          rel="stylesheet" type="text/css">
    <!--<script src="theme/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>-->
    <style>
        .iframe-holder:before {
            position: absolute;
            content: '';
            top: 0;
            width: 100%;
            height: 80%;
            left: 0;
            overflow: hidden;
        }

        .action-strip-2 .iframe-holder:before {
            top: auto;
            bottom: 60px;
        }

        nav, .fullscreen-container {
            left: 48px !important;
        }

        .relative-nav {
            left: 0 !important;
        }

        nav.scrolled {
            left: 48px !important;
        }
    </style>


    <style>
        .vhc {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: #2b2b2b;
            font-family: Roboto, "Helvetica Neue", Helvetica, Helvetica, Arimo, Arial, sans-serif !important;
            font-smoothing: antialiased;
            -webkit-font-smoothing: antialiased;
            opacity: 1
        }

        .vhb {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 40px;
            margin-left: -100px;
            margin-top: -20px;
            z-index: 2
        }

        .vhb img {
            width: 100%
        }

        .vha {
            position: absolute;
            bottom: 40px;
            left: 50%;
            width: 200px;
            margin-left: -100px;
            text-align: center;
            color: #fff;
            font-size: 13px
        }

        .vha span {
            display: block;
            line-height: 19px;
            opacity: .5
        }

        .vlb {
            max-width: 60px;
            display: inline-block;
            margin-bottom: 12px;
            opacity: .5
        }

        .vla {
            position: absolute;
            width: 500px;
            top: 80px;
            margin-left: -250px;
            left: 50%;
            overflow: hidden;
            text-align: center;
            opacity: 0;
            transition: all .3s ease;
            -webkit-transition: all .3s ease
        }

        .vla.vhr {
            opacity: 1
        }

        .vlc {
            background: #333;
            color: #eee;
            padding: 24px;
            border-radius: 2px
        }

        .vlc .oi {
            display: inline-block;
            margin-right: 8px;
            font-size: 18px;
            color: #f6f6f6
        }

        .vlc p {
            display: inline-block
        }

        .vld {
            cursor: wait;
            background-color: transparent;
            opacity: .3;
            border-radius: 30px;
            animation: loading .5s infinite linear;
            -moz-animation: loading .5s infinite linear;
            -webkit-animation: loading .5s infinite linear;
            border: 5px solid #fff;
            border-top: 5px solid transparent;
            border-left: 5px solid transparent;
            width: 30px;
            height: 30px;
            position: absolute;
            left: 50%;
            margin-left: -15px;
            top: 50%;
            margin-top: 50px
        }

        @keyframes loading {
            0% {
                transform: rotate(0deg);
                -moz-transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg);
                -moz-transform: rotate(360deg)
            }
        }

        @-moz-keyframes loading {
            0% {
                -moz-transform: rotate(0deg)
            }
            100% {
                -moz-transform: rotate(360deg)
            }
        }

        @-webkit-keyframes loading {
            0% {
                -webkit-transform: rotate(0deg)
            }
            100% {
                -webkit-transform: rotate(360deg)
            }
        }

        .vnu {
            display: inline-block;
        }
    </style>

</head>
<body mrv_namespace="medium.rare.machine" mrv_contenttarget=".main-container" mrv_navtarget=".nav-container"
      mrv_footertarget=".main-container">

<div class="vhc vhq">

    <div class="vla">
        <ul class="slides">
            <li>
                <div class="vlc">
                    <span class="oi" data-glyph="lightbulb"></span>

                    <p>
                        Double-click icons to show the icon chooser.
                    </p>
                </div>
            </li>
            <li>
                <div class="vlc">
                    <span class="oi" data-glyph="lightbulb"></span>

                    <p>
                        Right-click elements on the page to edit them.
                    </p>
                </div>
            </li>

            <li>
                <div class="vlc">
                    <span class="oi" data-glyph="lightbulb"></span>

                    <p>
                        Rename sections in the sidebar to enable them as in-page links.
                    </p>
                </div>
            </li>

            <li>
                <div class="vlc">
                    <span class="oi" data-glyph="lightbulb"></span>

                    <p>
                        Export your pages as Variant files for later editing.
                    </p>
                </div>
            </li>

            <li>
                <div class="vlc">
                    <span class="oi" data-glyph="lightbulb"></span>

                    <p>
                        Export all your pages as HTML in the pages tab.
                    </p>
                </div>
            </li>
        </ul>
    </div>

    <div class="vld">

    </div>

    <div class="vhb">
        <img alt="Variant HTML Page Builder" src="img/full-logo.png">
    </div>

    <div class="vha">
        <a target="_blank" href="http://www.mediumra.re/"><img class="vlb" alt="Variant HTML Page Builder"
                                                               src="img/mrare.png"></a>
        <span>&copy; Copyright 2015 Medium Rare<br>All Rights Reserved</span>
    </div>

    <div class="vjg"></div>
</div>

<div class="vhv vba">

    <div class="vjc vjf vle">

        <div class="vlf">
            <ul>
                <li title="Pages" class="vlg vfp"><span class="oi" data-glyph="file"></span></li>
                <li title="Content" class="vlh vhr"><span class="oi" data-glyph="layers"></span></li>
                <li title="Style" class="vlj"><span class="oi" data-glyph="brush"></span></li>
            </ul>

            <div class="vll">

                <div title="Variant Settings" class="vlm">
                    <span class="oi" data-glyph="cog"></span>
                </div>

                <div title="Lock Sidebar" class="vgw vhq">
                    <span class="oi" data-glyph="lock-unlocked"></span>
                </div>
            </div>

        </div>

        <div class="vkm vjz">
            <div class="vgx">

                <div class="vlo vlp">

                    <div class="vlq">
                        <span>Variant Pages</span>
                    </div>

                    <div class="vhs vgc">Save Page As</div>
                    <div class="vhs ved">Import</div>
                    <input type="file" class="vef" name="vef[]">

                    <div class="vmd">

                        <div class="vfw empty-vfw">

                        </div>
                    </div>

                    <div class="vls">

                        <div class="vah vhs vaj vil">
                            <span>保存</span>
                        </div>

                    </div>

                </div>

                <div class="vlv vlp vhr">

                    <div class="vlq">
                        <span class="vcr">Page Content</span>
                    </div>

                    <div class="vlw">
                        <span class="vei vlx" contenteditable="true">Edit title tag</span>
                        <span class="oi" data-glyph="pencil"></span>
                    </div>

                    <div class="vmd">

                        <div class="vho">
                            <span class="vly oi" data-glyph="compass">Navigation Type</span>
                            <ul class="vfj">

                            </ul>
                            <ul class="vfn">
                                <li class="vfo">No Nav</li>
                            </ul>
                        </div>

                        <div class="vho">
                            <span class="vly oi" data-glyph="expand-down">Footer Type</span>
                            <ul class="vdm">

                            </ul>
                            <ul class="vfk">
                                <li class="vfl">No Footer</li>
                            </ul>
                        </div>

                        <div class="vem empty-vem">
                        </div>

                        <div class="vac">
                            <span></span>
                        </div>

                    </div>

                    <div class="vgr">
                        <span class="vhq">SHOW</span>
                        <span class="oi" data-glyph="trash"></span>
                    </div>

                    <div class="vad">


                        <div class="vgt">

                            <div class="vlz">
                                <div class="vma">
                                    <span>Filter</span>
                                </div>

                                <div class="vgi">
                                    <div class="vgh vhr" vbp="*">
                                        Show All
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="vgm">
                        </div>


                    </div>

                    <div class="vls">

                        <div class="vdq">
                            <span class="vhq">Get HTML</span>
                        </div>

                    </div>


                </div>

                <div class="vmb vlp">

                    <div class="vlq">
                        <span>Page Style</span>
                    </div>

                    <div class="vmd vnb empty-vmd">

                        <div class="vho vmu vih">
                            <span class="vly oi" data-glyph="droplet">Colour Scheme</span>
                            <ul class="vay">

                            </ul>
                        </div>

                        <div class="vho vmy vih">
                            <span class="vly vmz oi" data-glyph="text">Typography</span>
                            <ul class="vms">

                            </ul>
                        </div>

                    </div>

                    <div class="vls">

                        <div class="vdq">
                            <span class="vhq">Get HTML</span>
                        </div>

                    </div>


                </div>

            </div>
        </div>


    </div>

    <div class="viu">

    </div>

    <div class="vhm">
        <div class="vet vih vhe"><span>Load Previous Page</span></div>
        <div class="vhd vih vhe"><span>Start New Page</span></div>
    </div>

</div>

<div class="vaf vin vds">
    <div class="vfa">
        <span class="vjl vag"></span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew">
        <p class="vae">

        </p>
    </div>
    <div class="vjp">
        <div class="vhs vak vix vex">Ok</div>
    </div>

</div>

<div class="vfc vin vds">
    <div class="vfa">
        <span class="vjl">Save custom navigation</span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew">
        <p>
            Give this nav menu a name so that you can retrieve it from 'Navigation Styles' at any time later on.
        </p>

        <div class="vej">
            <i class="oi" data-glyph="compass"></i>
            <input type="text" placeholder="Navigation Name" class="vgb vez">
        </div>
    </div>

    <div class="vjp">
        <div class="vhs vex val vil">Cancel</div>
        <div class="vhs vga vak vix">Save</div>
    </div>

</div>

<div class="vfb vin vds">
    <div class="vfa">
        <span class="vjl">Save custom footer</span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew">
        <p>
            Give this footer a name so that you can retrieve it from 'Footer Styles' at any time later on.
        </p>

        <div class="vej">
            <i class="oi" data-glyph="expand-down"></i>
            <input type="text" placeholder="Footer Name" class="vfz vez">
        </div>
    </div>

    <div class="vjp">
        <div class="vhs vex val vil">Cancel</div>
        <div class="vhs vfy vak vix">Save</div>
    </div>

</div>

<div class="vge vin vds">
    <div class="vfa">
        <span class="vjl">Save current page</span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew">
        <p>
            Name and save the current page for later use.
        </p>

        <div class="vej">
            <i class="oi" data-glyph="file"></i>
            <input type="text" placeholder="Page Name" class="vgf vez">
        </div>
    </div>

    <div class="vjp">
        <div class="vhs vex val vil">Cancel</div>
        <div class="vhs vgd vak vix">Save</div>
    </div>

</div>

<div class="vcw vin">
    <div class="vfa">
        <span class="vjl">Edit Link </span><span class="vcq"></span>
    </div>

    <div class="vew">
        <div class="vej vgp">
            <span>Inner link:</span>
            <select class="veh vja">
                <option value="">Select</option>
            </select>
        </div>
        <div class="vej">
            <span>Edit link href:</span>
            <span class="oi" data-glyph="link-intact"></span>
            <input type="text" class="vcu vez">
            <input type="text" class="vcv vez vih">
        </div>
        <div class="vej">
            <span>Open in:</span>
            <span class="oi" data-glyph="browser"></span>
            <select class="vcy vja">
                <option class="vcz edit-link-target-_blank-mrv" value="_blank">New Tab</option>
                <option class="vcz edit-link-target-_self-mrv" value="_self" selected="selected">Own Tab</option>
            </select>
        </div>
    </div>

    <div class="vjp">
        <div class="vhs vex val vil">Cancel</div>
        <div class="vhs vcx vak vix">Save</div>
    </div>

</div>

<div class="vcl vin">
    <div class="vfa">
        <span class="vjl">Edit Image</span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew">
        <div class="vhs vhp vaj vil"><span class="oi" data-glyph="grid-three-up"></span></div>
        <div class="vea">
            <div class="vey">
                <div class="vej">
                    <span>Edit image src:</span>
                    <span class="oi" data-glyph="image"></span>
                    <input type="text" placeholder="Image 'src' value" class="vco vez">
                </div>

                <div class="vej">
                    <span>Edit image alt:</span>
                    <span class="oi" data-glyph="tags"></span>
                    <input type="text" placeholder="Image 'alt' value" class="vcf vez">
                </div>

                <input class="vck vih" type="text">
            </div>

            <div class="vey">
                <div class="vcm">
                    <img alt="Edit Image" src="" class="vcp">
                    <span class="veb">1280x800</span>
                </div>
            </div>

            <div class="vjp">
                <div class="vhs vex val vil">Cancel</div>
                <div class="vhs vcn vak vix">Save</div>
            </div>
        </div>


    </div>

    <div class="vdz"
         vbv="hero24.jpg,hero25.jpg,hero23.jpg,hero22.jpg,hero21.jpg,hero26.jpg,hero20.jpg,hero19.jpg,hero18.jpg,hero17.jpg,hero16.jpg,hero15.jpg,hero14.jpg,hero13.jpg,hero12.jpg,hero11.jpg,hero10.jpg,hero8.jpg,hero5.jpg,hero4.jpg,hero3.jpg,hero1.jpg,header1,jpg,divider1.jpg,logo-square-light.png,logo-square-dark.png,phone.png,product1.jpg,product2.jpg,product3.jpg,service-icon1.png,service-icon2.png,service-icon3.png,team-square1.jpg,team-square2.jpg,team-square3.jpg,work1.jpg,work2.jpg">
        <input type="file" class="vch" name="vci[]" multiple="multiple">

        <div class="vdx">
        </div>
        <div class="vhs vee">Import Images</div>
    </div>


</div>

<div class="vde vin vdo">
    <div class="vfa">
        <span class="vjl">Edit Video Source</span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew">
        <div class="vej">
            <span>Edit MP4 Source:</span>
            <span class="oi" data-glyph="video"></span>
            <input type="text" class="vda vez">
        </div>

        <div class="vej">
            <span>Edit WEBM Source:</span>
            <span class="oi" data-glyph="video"></span>
            <input type="text" class="vdg vez">
        </div>

        <div class="vej">
            <span>Edit OGV Source:</span>
            <span class="oi" data-glyph="video"></span>
            <input type="text" class="vdb vez">
            <input class="vih vdd" type="text">

        </div>
    </div>
    <div class="vjp">
        <div class="vhs vex val vil">Cancel</div>
        <div class="vhs vdf vak vix">Save</div>
    </div>

</div>

<div class="vcd vin">
    <div class="vfa">
        <span class="vjl">Edit Icon</span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew">
        <div class="edit-icons-filter-input-mrv">
            <span class="oi" data-glyph="magnifying-glass"></span>
            <input type="text" class="vok vez" placeholder="Filter Icons">
        </div>
        <a href="#" class="vhs vol-mrv vih">clear</a>

        <div class="vce">


        </div>
    </div>

    <div class="vjp">
        <input id="vgo" class="vih" type="text">

        <div class="vhs vex vcc vak vix">Done</div>
    </div>

</div>

<div class="vdr vin">
    <div class="vfa">
        <span class="vjl">HTML Source Code</span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew">
        <div class="vft">
					<textarea class="vfu" cols="256" readonly="readonly" wrap="soft">
					</textarea>
        </div>
    </div>

    <div class="vjp">
        <div class="vhs vgn vaj vil">Select All</div>
        <div class="vhs vgy vaj vil">Download HTML file</div>
        <div class="vhs vex vak vix">Done</div>
    </div>

</div>

<div class="global-vfr vin vkf">
    <img alt="Logo" src="img/full-logo.png">

    <div class="vew">
        <div class="vhs vap val">Clear Navs</div>
        <div class="vhs vao val">Clear Footers</div>
        <div class="vhs vaq val">Clear Pages</div>
        <div class="vhs van val">Delete All</div>
    </div>
    <img alt="Medium Rare" src="img/mrare.png">

    <p>
        &copy; Copyright <span class="vkg">2014</span> Medium Rare
    </p>
</div>

<div class="vbi vin vdo">
    <div class="vfa">
        <span class="vjl vbk"> </span>
        <i class="variant-icon variant-close-circle vex"></i>
    </div>

    <div class="vew vbd">
        <p class="vbh"></p>

        <div class="vej">
            <span class="vbf"> </span>
            <span class="oi vkh" data-glyph=""></span>
            <input type="text" class="vbg vez">
            <input type="text" class="vbe vih">
            <input type="text" class="vbc vih">
        </div>
    </div>

    <div class="vjp">
        <div class="vhs vex val vil">Cancel</div>
        <div class="vhs vbj vak vix">Save</div>
    </div>

</div>


<div class="vhw vjr">
    <div class="vau">element type</div>
    <div class="vki vih vaw vav vfq">Options &gt;</div>
    <div class="vgk vih vaw vav vfq oi"></div>
    <div class="vdh vih vaw vav vfq oi"></div>
    <div class="vct vih vaw vav vfq">Edit Link</div>
    <div class="vcg vih vaw vav vfq">Edit Image</div>
    <div class="vdc vih vaw vav vfq">Edit Video Source</div>
    <div class="vcc vih vaw vav vfq">Choose Icon</div>
    <div class="veg vih vaw vav vfq">Expand Column</div>
    <div class="vbt vih vaw vav vfq">Shrink Column</div>
    <div class="vas vih vaw vav vfq">Clone Whole Slide</div>
    <div class="vcb vih vaw vav vfq">Delete Whole Slide</div>
    <div class="nav-class-context-options"></div>
    <div class="var vaw vav">Clone</div>
    <div class="vbw vaw vav">Remove</div>
    <ul class="vnc context vih">

    </ul>
</div>

<div id="vgg" class="vih">

    <section id="variant-hero-slider-1" class="vim" vbp="header,slider" vbr="Simple Text Slider">
        <section class="hero-slider large-image">
            <ul class="slides">
                <li>
                    <div class="background-image-holder">
                        <img alt="Slide Background" class="background-image" src="../img/hero24.jpg">
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <h1 class="text-white">Don't just build. Create.</h1>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="background-image-holder">
                        <img alt="Slide Background" class="background-image" src="../img/hero11.jpg">
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <h1 class="text-white">Don't just build. Create.</h1>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </section>

    <section id="variant-hero-slider-2" class="vim" vbp="header,slider" vbr="Long Text Slider">
        <section class="hero-slider">
            <ul class="slides">

                <li>
                    <div class="background-image-holder">
                        <img alt="Slide Background" class="background-image" src="../img/hero11.jpg">
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-sm-7 col-md-6">
                                <h1 class="text-white">Welcome to Machine</h1>

                                <p class="text-white super-lead">Machine steps in a bold new direction for HTML
                                    templates, offering you complete creative control.</p>
                                <a class="btn btn-white" href="#">Start The Convo</a>
                                <a class="btn btn-filled" href="#">Roll The Dice</a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </section>

    <section id="variant-hero-slider-3" class="vim" vbp="header,slider" vbr="Centered Text Slider">
        <section class="hero-slider centered-text-slider">
            <ul class="slides">
                <li class="overlay text-center">

                    <div class="background-image-holder">
                        <img alt="Slide Background" class="background-image" src="../img/hero22.jpg">
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <h1 class="text-white">Create unique layouts in seconds with Machine</h1>

                                <p class="super-lead text-white">Machine steps in a bold new direction for HTML
                                    templates, offering you complete creative control.</p>
                                <a class="btn btn-white" href="#">Start The Convo</a>
                                <a class="btn btn-filled" href="#">Roll The Dice</a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </section>
    </section>

    <section id="variant-hero-slider-8" class="vim" vbp="header,slider" vbr="Reactive layer slider">
        <section class="hero-slider large-image">
            <ul class="slides">
                <li class="hover-background">
                    <div class="background-image-holder">
                        <img class="background-image" alt="Background Image" src="../img/layer1.jpg">
                    </div>

                    <div class="foreground-image-holder layer-1">
                        <img class="background-image" alt="Background Image" src="../img/layer2.png">
                    </div>

                    <div class="foreground-image-holder layer-2">
                        <img class="background-image" alt="Background Image" src="../img/layer3.png">
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <h1 class="text-white">Don't just build. Create.</h1>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </section>

    <section id="variant-hero-slider-4" class="vim" vbp="header,slider,video" vbr="Hosted Video Slider">
        <section class="hero-slider large-image">
            <ul class="slides">
                <li>
                    <div class="background-image-holder">
                        <img alt="Slide Background" class="background-image" src="../img/hero11.jpg">
                    </div>

                    <div class="video-holder gradient-overlay video-wrapper">
                        <video autoplay muted loop>
                            <source src="../video/video.webm" type="video/webm">
                            </source>
                            <source src="../video/video.mp4" type="video/mp4">
                            </source>
                            <source src="../video/video.ogv" type="video/ogg">
                            </source></video>
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <h1 class="text-white">Don't just build. Create.</h1>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </section>
    </section>

    <section id="variant-hero-slider-6" class="vim" vbp="header,slider" vbr="Slider with logo">
        <section class="hero-slider large-image">
            <ul class="slides">
                <li>
                    <div class="background-image-holder overlay">
                        <img alt="Slide Background" class="background-image" src="../img/hero25.jpg">
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <img alt="logo" class="logo" src="../img/logo-square-light.png">

                                <h1 class="text-white">Don't just build. Create.</h1>

                                <h3 class="text-white">Machine steps in a bold, intuitive <em>new direction</em> for
                                    HTML templates.</h3>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </section>
    </section>

    <section id="variant-hero-slider-7" class="vim" vbp="header,slider" vbr="Fullscreen slider large text">
        <section class="hero-slider parallax">
            <ul class="slides">
                <li class="overlay text-center fullscreen-element">

                    <div class="background-image-holder parallax-background">
                        <img alt="Slide Background" class="background-image" src="../img/hero23.jpg">
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-md-10 col-md-offset-1">
                                <h1 class="text-white jumbo-h1 uppercase">Bespoke<br> <em>Digital</em> Design</h1>
                                <h5 class="text-white">Machine offers a <em>higher</em> level of design and
                                    craftsmanship.</h5>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </section>

    <section id="variant-page-header-1" class="vim" vbp="header" vbr="Short Page Header">
        <section class="page-header short">
            <div class="background-image-holder">
                <img alt="Slide Background" class="background-image">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="detail-line"></div>
                        <h4 class="text-white">This is the page title</h4>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-page-header-2" class="vim" vbp="header" vbr="Large Text Header">
        <section class="text-hero">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-sm-10">
                        <h1>We craft elegant solutions and purposeful direction for startups.</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-9 col-sm-12">
                        <p class="super-lead">
                            Machine is a creative agency with a diverse repertoire of digital expertise.<br> We work
                            across a range of mediums to deliver targeted, measurable results.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-page-header-3" class="vim" vbp="header" vbr="Fullwidth Page Header">
        <section class="hero-slider large-image short-header">
            <ul class="slides">
                <li>
                    <div class="background-image-holder background-parallax">
                        <img alt="Slide Background" class="background-image" src="../img/hero13.jpg">
                    </div>

                    <div class="container vertical-align">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <h1 class="text-white">Fullwidth Header</h1>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </section>

    <section id="variant-text-1" class="vim" vbp="text" vbr="3 Column Text">
        <section class="col-3-text">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="detail-line"></div>
                        <h5>An Incredible Design</h5>

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex.
                        </p>
                    </div>

                    <div class="col-sm-4">
                        <div class="detail-line"></div>
                        <h5>Next level page building</h5>

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex.
                        </p>
                    </div>

                    <div class="col-sm-4">
                        <div class="detail-line"></div>
                        <h5>Bootstrap Goodness</h5>

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-2" class="vim" vbp="text" vbr="Text with image block">
        <section class="image-block mr-can-parallax">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-7">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Delivering ideas + innovation</h5>
                            <h4>Your ambitious ideas<br> Our unwavering passion</h4>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation ullamco laboris nisi ut aliquip ex.
                            </p>
                            <span class="uppercase">Some industries we've worked in</span>

                            <p>
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                nulla pariatur.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="image-holder col-md-6 col-sm-4 pull-right">
                <div class="background-image-holder">
                    <img alt="Slide Background" class="background-image" src="../img/hero3.jpg">
                </div>
            </div>

        </section>
    </section>

    <section id="variant-text-23" class="vim" vbp="text" vbr="Paragraph with image slider">
        <section class="image-block mr-can-parallax">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-7 col-md-offset-7 col-sm-offset-5">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Delivering ideas + innovation</h5>

                            <p>
                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                                occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
                                mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
                                expedita distinctio.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="image-holder col-md-6 col-sm-4 pull-left">
                <div class="image-slider">
                    <ul class="slides">
                        <li>
                            <div class="background-image-holder">
                                <img alt="Slide Background" class="background-image" src="../img/box1.jpg">
                            </div>
                        </li>

                        <li>
                            <div class="background-image-holder">
                                <img alt="Slide Background" class="background-image" src="../img/box2.jpg">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-text-24" class="vim" vbp="text,video" vbr="Paragraph with video">
        <section class="image-block">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-7">
                        <div class="text-block">
                            <h2>Embed media at the click of a button with Variant</h2>

                            <p>
                                Atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
                                provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum
                                et dolorum fuga.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="image-holder embed-holder col-md-6 col-sm-4 pull-right">
                <iframe no-src="http://player.vimeo.com/video/112208320?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
            </div>
        </section>
    </section>

    <section id="variant-text-15" class="vim" vbp="text" vbr="Large centered paragraph">
        <section class="large-pad">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
                        <p class="super-lead">
                            Machine is the distillation of our vision to deliver a truly premium experience to web
                            professionals and newcomers alike. Taking cues from the contemporary and authentic, Machine
                            assembles the best of the modern web in one remarkable template.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-26" class="vim" vbp="text" vbr="Dark centered paragraph">
        <section class="large-pad dark-bg text-hero-2">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-12">
                        <h1 class="text-white text-center">Manifesto</h1>

                        <p class="super-lead text-white">
                            Machine is the distillation of our vision to deliver a truly premium experience to web
                            professionals and newcomers alike. Taking cues from the contemporary and authentic, Machine
                            assembles the best of the modern web in one remarkable template.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-3" class="vim" vbp="text" vbr="Features with list">
        <section class="feature-lists">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Our Services</h5>
                            <h4>We design for the ever-changing screen</h4>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="feature-list" vht="parent">
                            <i class="icon icon-large pe-7s-credit"></i>
                            <h5>E-Commerce Solutions</h5>

                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
                            </p>
                            <ul class="arrow-list">
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">Web Applications</a></li>
                                <li><a href="#">Digital Strategy</a></li>
                                <li><a href="#">Information Architecture</a></li>
                                <li><a href="#">Copywriting</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="feature-list" vht="parent">
                            <i class="icon icon-large pe-7s-id"></i>
                            <h5>Enterprise Systems</h5>

                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
                            </p>
                            <ul class="arrow-list">
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">Web Applications</a></li>
                                <li><a href="#">Digital Strategy</a></li>
                                <li><a href="#">Information Architecture</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="feature-list" vht="parent">
                            <i class="icon icon-large pe-7s-comment"></i>
                            <h5>Marketing + Strategy</h5>

                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
                            </p>
                            <ul class="arrow-list">
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">Web Applications</a></li>
                                <li><a href="#">Digital Strategy</a></li>
                                <li><a href="#">Information Architecture</a></li>
                                <li><a href="#">Copywriting</a></li>
                                <li><a href="#">node.js</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-25" class="vim" vbp="text" vbr="Centered text with icon">
        <section class="feature-lists large-pad">
            <div class="container">

                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="feature-list text-center" vht="parent">
                            <i class="icon icon-large pe-7s-user"></i>
                            <h5>We employ our unique methodology to ensure your campaign is successful</h5>

                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
                            </p>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="feature-list text-center" vht="parent">
                            <i class="icon icon-large pe-7s-compass"></i>
                            <h5>Our solutions are built from the ground-up to address your project requirements</h5>

                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
                            </p>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="feature-list text-center" vht="parent">
                            <i class="icon icon-large pe-7s-help2"></i>
                            <h5>Your final product will be tailor made and well supported by our friendly team</h5>

                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-4" class="vim" vbp="text" vbr="Colour block features">
        <section class="no-pad fullwidth color-features">
            <div class="col-md-4">
                <div class="color-feature">
                    <div class="detail-line"></div>
                    <h5 class="alt-font text-white">Our Expertise</h5>
                    <i class="pe-7s-pen"></i>
                    <h5 class="text-white">Branding + Strategy</h5>

                    <p class="text-white">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="color-feature">
                    <div class="detail-line"></div>
                    <h5 class="alt-font text-white">Our Promise</h5>
                    <i class="pe-7s-refresh"></i>
                    <h5 class="text-white">No Challenge Too Great</h5>

                    <p class="text-white">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="color-feature">
                    <div class="detail-line"></div>
                    <h5 class="alt-font text-white">Our Philosophy</h5>
                    <i class="pe-7s-target"></i>
                    <h5 class="text-white">Teamwork Is An Artform</h5>

                    <p class="text-white">
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
                    </p>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-5" class="vim" vbp="text" vbr="Stats with text">
        <section class="inline-skills">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>About Our Company</h5>
                            <h4>Vast experience meets ambitious vision.</h4>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation ullamco laboris nisi ut aliquip ex.
                            </p>
                            <a class="text-link" href="#">Learn even more <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="skills-wrapper">
                            <div class="skill">
                                <i class="pe-7s-user"></i>
                                <span class="number">50+</span>
                                <span class="sub">Projects Delivered</span>
                            </div>

                            <div class="skill">
                                <i class="pe-7s-coffee"></i>
                                <span class="number">24</span>
                                <span class="sub">Cliches Avoided</span>
                            </div>

                            <div class="skill">
                                <i class="pe-7s-scissors"></i>
                                <span class="number">16</span>
                                <span class="sub">Grand Openings</span>
                            </div>

                            <div class="skill">
                                <i class="pe-7s-joy"></i>
                                <span class="number">+1</span>
                                <span class="sub">Levels Up</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-text-6" class="vim" vbp="text" vbr="Wide text features">
        <section class="wide-features">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="wide-feature" vht="parent">
                            <i class="pe-7s-repeat"></i>

                            <h2>Corporate design that<br> oozes freshness</h2>

                            <p>
                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                                occaecati cupiditate non provident, similique sunt in culpa qui officia.
                            </p>
                            <a class="text-link" href="#">Learn even more <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="wide-feature" vht="parent">
                            <i class="pe-7s-loop"></i>

                            <h2>Ultra flexible layouts<br> with intuitive page building</h2>

                            <p>
                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                                occaecati cupiditate non provident, similique sunt in culpa qui officia.
                            </p>
                            <a class="text-link" href="#">Learn even more <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-7" class="vim" vbp="text" vbr="Large text with image block">
        <section class="image-block">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-7">
                        <div class="text-block">
                            <h2>Join now and start<br> living a healthier life</h2>

                            <p class="lead">
                                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
                                id quod maxime placeat facere possimus
                            </p>
                            <a class="btn" href="#">Find Out How</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="image-holder col-md-6 col-sm-4 pull-right">
                <div class="background-image-holder">
                    <img alt="Slide Background" class="background-image" src="../img/hero21.jpg">
                </div>
            </div>

        </section>
    </section>

    <section id="variant-text-8" class="vim" vbp="text" vbr="Restricted paragraphs">
        <section class="duplicatable-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-md-offset-2 col-sm-6">
                        <h4>Machine reeks of confidence</h4>

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <a
                                class="inline-link" href="#">an inline link</a> incididunt ut labore et dolore magna
                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                            ex ea commodo consequat.
                        </p>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <h4>Unprecedented style & flexibility</h4>

                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                            voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                            cupiditate non provident
                        </p>
                        <a class="text-link" href="#">Start the conversation <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-9" class="vim" vbp="text" vbr="Large CTA panels">
        <section class="large-cto">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-6">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Take action now</h5>
                            <h4>Machine offers you<br> truly complete control</h4>

                            <p class="lead">
                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                                occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
                                mollitia animi.
                            </p>

                            <div class="col-md-6">
                                <span class="uppercase">Intuitive Page Builder</span>

                                <p>
                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                    fugiat nulla pariatur.
                                </p>
                            </div>

                            <div class="col-md-6">
                                <span class="uppercase">Superior Design</span>

                                <p>
                                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                    fugiat nulla pariatur.
                                </p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="large-cto-holder pull-right col-md-6 col-sm-5">
                <div class="cto">
                    <div class="vertical-align">
                        <span class="alt-font title text-white">Ready to take some action?</span>
                        <span class="sub text-white">We're ready to help</span>
                        <a class="text-link text-white" href="#">Start the conversation <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>
                    <i class="large-icon pe-7s-target"></i>
                </div>

                <div class="cto">
                    <div class="vertical-align">
                        <span class="alt-font title text-white">Ready to take some action?</span>
                        <span class="sub text-white">We're ready to help</span>
                        <a class="text-link text-white" href="#">Start the conversation <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>
                    <i class="large-icon pe-7s-science"></i>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-text-10" class="vim" vbp="text,divider" vbr="Links on image overlay">
        <section class="careers overlay overlay-primary parallax">

            <div class="background-image-holder parallax-background">
                <img alt="Slide Background" class="background-image" src="../img/hero4.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5 class="text-white">Join Our Team</h5>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="job-desc" vht="parent">
                            <a href="#" class="text-white">Engineer (iOS) <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>

                            <p class="text-white lead">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua.
                            </p>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="job-desc" vht="parent">
                            <a href="#" class="text-white">Client Manager (LA) <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>

                            <p class="text-white lead">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua.
                            </p>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <span class="text-white sub">* No openings that take your fancy? Send your CV / portfolio to</span><a
                            class="text-link text-white sub" href="#">work@machine.net <i
                            class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>
                </div>

            </div>

        </section>
    </section>

    <section id="variant-text-11" class="vim" vbp="text" vbr="Dense text with image">
        <section class="image-block short-pad">

            <div class="image-holder col-md-4 pull-left">
                <div class="background-image-holder">
                    <img alt="Slide Background" class="background-image" src="../img/hero26.jpg">
                </div>
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-8 col-md-offset-4">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>A proven process</h5>
                            <h4>Delivering corporate<br> good looks with style</h4>

                            <p>
                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum deleniti atque corrupti quos dolores et quas molestiai.
                            </p>

                            <p>
                                Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </p>
                            <a class="text-link" href="#">Read our story <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-4">
                        <div class="member-spotlight">
                            <img alt="Team Member" src="../img/team1.jpg">
                            <span class="title alt-font">Jihen So / CEO & Founder</span>

                            <p>
                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                                mollit anim id est laborum.
                            </p>
                            <ul class="arrow-list">
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">Web Applications</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-text-12" class="vim" vbp="text" vbr="Text, Image, Icon Feature">
        <section class="cto-features">

            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="text-block">
                            <h2>A template with vast application + potential</h2>

                            <p class="lead">
                                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
                                id quod maxime placeat facere possimus
                            </p>
                            <a class="btn" href="#">Find Out How</a>
                        </div>
                    </div>

                    <div class="col-md-8 col-sm-6">
                        <img alt="Screenshot" src="../img/isometric-screen.png">
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="wide-feature text-center" vht="parent">
                            <i class="pe-7s-browser cto-icon"></i>
                            <h4>Get creative with custom blocks</h4>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna.
                            </p>
                            <a class="text-link" href="#">Start the conversation <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="wide-feature text-center" vht="parent">
                            <i class="pe-7s-date cto-icon"></i>
                            <h4>Regular, community powered updates</h4>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna.
                            </p>
                            <a class="text-link" href="#">Start the conversation <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>
                </div>

            </div>

        </section>
    </section>

    <section id="variant-text-13" class="vim" vbp="text" vbr="Features with own image">
        <section class="image-features">

            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="image-feature" vht="parent">
                            <img alt="Feature Image" src="../img/service-icon1.png">
                            <h5>User Experience & Engagement</h5>

                            <p>
                                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                                eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
                            </p>
                            <a class="text-link" href="#">Tell me more <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="image-feature" vht="parent">
                            <img alt="Feature Image" src="../img/service-icon2.png">
                            <h5>Digital Strategy & Design</h5>

                            <p>
                                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                                eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
                            </p>
                            <a class="text-link" href="#">Tell me more <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="image-feature" vht="parent">
                            <img alt="Feature Image" src="../img/service-icon3.png">
                            <h5>Market Research & Analysis</h5>

                            <p>
                                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                                eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
                            </p>
                            <a class="text-link" href="#">Tell me more <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-text-16" class="vim" vbp="text" vbr="Narrow features with icon">
        <section class="narrow-features">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Unmatched Expertise</h5>
                            <h4>Vast experience meets<br> ambitious vision.</h4>
                        </div>
                    </div>

                    <div class="col-sm-8">
                        <div class="col-md-6 col-sm-12">
                            <div class="narrow-feature" vht="parent">
                                <i class="icon pe-7s-compass"></i>

                                <div class="content">
                                    <h5>Slick & Extensible</h5>

                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-12">
                            <div class="narrow-feature" vht="parent">
                                <i class="icon pe-7s-target"></i>

                                <div class="content">
                                    <h5>On Trend Design</h5>

                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-12">
                            <div class="narrow-feature" vht="parent">
                                <i class="icon pe-7s-paint"></i>

                                <div class="content">
                                    <h5>Tons of Options</h5>

                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-sm-12">
                            <div class="narrow-feature" vht="parent">
                                <i class="icon pe-7s-help2"></i>

                                <div class="content">
                                    <h5>Dedicated Support Forum</h5>

                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt ut labore et dolore magna.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-17" class="vim" vbp="text" vbr="Short Text Panels">
        <section class="info-panels">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="info-panel" vht="parent">
                            <div class="title">
                                <h4>Clear Direction</h4>
                            </div>
                            <div class="body">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua.
                                </p>
                                <ul class="arrow-list">
                                    <li><a href="#">Web Design</a></li>
                                    <li><a href="#">Web Applications</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="info-panel" vht="parent">
                            <div class="title">
                                <h4>Digestible Information</h4>
                            </div>
                            <div class="body">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua.
                                </p>
                                <ul class="arrow-list">
                                    <li><a href="#">Brand Strategy</a></li>
                                    <li><a href="#">Print Marketing</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="info-panel" vht="parent">
                            <div class="title">
                                <h4>Useful Elements</h4>
                            </div>
                            <div class="body">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua.
                                </p>
                                <ul class="arrow-list">
                                    <li><a href="#">Web Design</a></li>
                                    <li><a href="#">Web Applications</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-18" class="vim" vbp="text" vbr="Short panels no border">
        <section class="info-panels">
            <div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="info-panel-slim" vht="parent">
                            <h4>Work Inquiries</h4>

                            <p class="lead">
                                We are recruiting!<br> Drop us a line if you're interested
                            </p>
                            <a class="text-link" href="#">work@machine.net <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="info-panel-slim" vht="parent">
                            <h4>General Inquiries</h4>

                            <p class="lead">
                                Complete our project planner<br> and we'll be in touch
                            </p>
                            <a class="text-link" href="#">hello@machine.net <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="info-panel-slim" vht="parent">
                            <h4>Come Visit Us</h4>

                            <p class="lead">
                                They come for the coffee<br> and stay for sweet designs.
                            </p>

                            <p>
                                300 Collins St.<br>
                                Melbourne, 3000
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-19" class="vim" vbp="text" vbr="Timeline">
        <section class="timeline-1">
            <div class="background-image-holder overlay">
                <img alt="Slide Background" class="background-image" src="../img/hero10.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <div class="timeline-section">
                            <div class="left-content timeline-content" vht=".timeline-section">
                                <h2 class="text-white">Discover</h2>

                                <p class="text-white">
                                    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur. Labore
                                    et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
                                    exercitationem.
                                </p>
                            </div>

                            <div class="right-content timeline-content" vht=".timeline-section">
                                <i class="pe-7s-compass text-white"></i>
                            </div>
                        </div>

                        <div class="timeline-section">
                            <div class="left-content timeline-content" vht=".timeline-section">
                                <i class="pe-7s-note2 text-white"></i>
                            </div>

                            <div class="right-content timeline-content" vht=".timeline-section">
                                <h2 class="text-white">Ideate</h2>

                                <p class="text-white">
                                    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur. Labore
                                    et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
                                    exercitationem.
                                </p>
                            </div>
                        </div>

                        <div class="timeline-section">
                            <div class="left-content timeline-content" vht=".timeline-section">
                                <h2 class="text-white">Build</h2>

                                <p class="text-white">
                                    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur. Labore
                                    et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
                                    exercitationem.
                                </p>
                            </div>

                            <div class="right-content timeline-content" vht=".timeline-section">
                                <i class="pe-7s-box2 text-white"></i>
                            </div>
                        </div>

                        <div class="timeline-section">
                            <div class="left-content timeline-content" vht=".timeline-section">
                                <i class="pe-7s-users text-white"></i>
                            </div>

                            <div class="right-content timeline-content" vht=".timeline-section">
                                <h2 class="text-white">Support</h2>

                                <p class="text-white">
                                    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur. Labore
                                    et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
                                    exercitationem.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-text-20" class="vim" vbp="text" vbr="Colour block text combo">
        <section class="services-combo-1">

            <i class="jumbo pe-7s-global"></i>

            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <p class="text-white super-lead">
                            Machine steps in a bold new direction for HTML templates, offering you complete creative
                            control.
                        </p>

                        <p class="lead text-white">
                            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
                            velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                            quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
                            suscipit laboriosam,
                        </p>
                        <a class="btn btn-filled" href="#">Learn More</a>
                    </div>

                    <div class="col-md-6 col-sm-12">
                        <div class="side-icon-feature">
                            <div class="icon" vht=".col-sm-12">
                                <i class="pe-7s-display1"></i>
                            </div>
                            <div class="content" vht=".col-sm-12">
                                <h5 class="text-white">Engaging Layouts</h5>

                                <p class="text-white">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua.
                                </p>
                            </div>
                        </div>

                        <div class="side-icon-feature">
                            <div class="icon" vht=".col-sm-12">
                                <i class="pe-7s-help2"></i>
                            </div>
                            <div class="content" vht=".col-sm-12">
                                <h5 class="text-white">Premium Support</h5>

                                <p class="text-white">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua.
                                </p>
                            </div>
                        </div>

                        <div class="side-icon-feature">
                            <div class="icon" vht=".col-sm-12">
                                <i class="pe-7s-keypad"></i>
                            </div>
                            <div class="content" vht=".col-sm-12">
                                <h5 class="text-white">Multiple Styles</h5>

                                <p class="text-white">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                    incididunt ut labore et dolore magna aliqua.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-21" class="vim" vbp="text" vbr="Text list with buttons">
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="text-list">
                            <p class="super-lead">
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                architecto beatae vitae dicta sunt.
                            </p>

                            <div class="item">
                                <div class="description">
                                    <h2>Front End Development</h2>

                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                                        veritatis et quasi architecto beatae vitae dicta sunt.
                                    </p>
                                </div>
                                <div class="action">
                                    <a href="#" class="btn">Enquire Now</a>
                                </div>
                            </div>

                            <div class="item">
                                <div class="description">
                                    <h2>Content Production</h2>

                                    <p>
                                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                                        veritatis et quasi architecto beatae vitae dicta sunt.
                                    </p>
                                    <a class="text-link sub" href="#">Learn More <i
                                            class="icon ti ti-arrow-right arrow_right"></i></a>
                                    <a class="text-link sub" href="#">See Examples <i
                                            class="icon ti ti-arrow-right arrow_right"></i></a>
                                </div>
                                <div class="action">
                                    <a href="#" class="btn">Enquire Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-text-22" class="vim" vbp="text" vbr="Expanding features">
        <section class="fullwidth-features">

            <div class="col-sm-4">
                <div class="fullwidth-feature" vht=".fullwidth-features">
                    <div class="top" vht=".fullwidth-features">
                        <i class="pe-7s-tools"></i>
                        <h5>Web design and development</h5>

                        <div class="detail-line"></div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="fullwidth-feature" vht=".fullwidth-features">
                    <div class="top" vht=".fullwidth-features">
                        <i class="pe-7s-umbrella"></i>
                        <h5>Product and package design</h5>

                        <div class="detail-line"></div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="fullwidth-feature" vht=".fullwidth-features">
                    <div class="top" vht=".fullwidth-features">
                        <i class="pe-7s-shopbag"></i>
                        <h5>E-Commerce solutions</h5>

                        <div class="detail-line"></div>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                        </p>
                    </div>
                </div>
            </div>


        </section>
    </section>

    <section id="variant-divider-1" class="vim" vbp="CTA" vbr="Covered BG promo">
        <section class="promo-1">
            <div class="promo-image-holder">
                <div class="background-image-holder">
                    <img alt="Slide Background" class="background-image" src="../img/divider1.jpg">
                </div>
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="col-sm-7 left-content">
                            <div class="vertical-align">
                                <h4>Let's give that dusty old<br> business some shine</h4>

                                <p class="lead">
                                    Nam libero tempore, cum soluta nobis est eligendi optio<br> cumque nihil impedit quo
                                    minus id quod maxime .
                                </p>
                            </div>
                        </div>

                        <div class="col-sm-5 right-content">
                            <div class="vertical-align">
                                <span class="text-white title">Questions or queries?</span>
                                <span class="sub">Get in touch immediately then man</span>
                                <a class="btn btn-white" href="#">Start The Convo</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-divider-2" class="vim" vbp="text" vbr="Testimonials slider">
        <section class="testimonials">
            <ul class="slides">

                <li>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-10 col-md-offset-1 text-center">
                                <p class="super-lead text-white">
                                    “Their collaborative process and mentoring mentality not only created a solid
                                    foundation for our product, but also established a high engineering standard that we
                                    hold ourselves to. The team at Medium Rare proved themselves invaluable.”
                                </p>
                                <span class="alt-font">Vince Masuka / Miami Metro</span>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-10 col-md-offset-1 text-center">
                                <p class="super-lead text-white">
                                    “When we first used Variant, it took us under five minutes to come to grips with the
                                    software. We applaud Medium Rare for the standout job they have done crafting this
                                    intuitive and innovative piece of software. Truly a shake-up in the HTML game.”
                                </p>
                                <span class="alt-font">Brian Moser / Ice on Site</span>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-10 col-md-offset-1 text-center">
                                <p class="super-lead text-white">
                                    “The team at Medium Rare proved themselves invaluable. Their collaborative process
                                    and mentoring mentality have not only created a solid foundation for our product,
                                    but also established a high engineering standard that we will now hold ourselves
                                    to.”
                                </p>
                                <span class="alt-font">Arthur Mitchell / Trinity</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </section>

    <section id="variant-divider-4" class="vim" vbp="divider" vbr="Simple image + text divider">
        <section class="text-divider overlay mr-can-parallax">
            <div class="background-image-holder">
                <img alt="Slide Background" class="background-image" src="../img/hero1.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                        <h5 class="text-white">Our Philosophy</h5>

                        <p class="text-white super-lead">
                            Always pushing to make beautiful digital experiences infused with emotion and executed with
                            excellence.
                        </p>
                        <a class="text-link text-white" href="#">About our company <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-divider-5" class="vim" vbp="CTA" vbr="Centered action strip">
        <section class="action-strip-1">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <span class="alt-font">Ready to get started?</span>
                        <span class="title">We're ready to help</span>
                        <i class="icon pe-7s-look"></i>
                        <a class="text-link" href="#">Start a project with us <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-divider-6" class="vim" vbp="divider,forms" vbr="Centered signup divider">
        <section class="mr-can-parallax signup-divider overlay parallax">
            <div class="background-image-holder parallax-background overlay">
                <img alt="Slide Background" class="background-image" src="../img/hero14.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 text-center">
                        <h1 class="text-white">We'll let you know when we're ready..</h1>

                        <p class="text-white super-lead">Enter your email and you will receive a personalized URL for
                            the demo website,<br> where you can fully test the theme.</p>

                        <form class="form-newsletter" data-success="Thanks for signing up, we'll be in touch shortly."
                              data-error="Please provide a valid email address.">
                            <input type="text"
                                   class="input-transparent validate-required validate-email signup-email-field"
                                   placeholder="Email Address Here" name="email">
                            <input type="submit" class="btn btn-filled" value="Invite Me Now">
                            <!--<iframe class="mail-list-form" srcdoc="&lt;!&ndash; Begin MailChimp Signup Form &ndash;&gt; <link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <style type=&quot;text/css&quot;> 	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id=&quot;mc_embed_signup&quot;> <form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;amp;id=d4b3d090a4&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>     <div id=&quot;mc_embed_signup_scroll&quot;> 	<h2>Subscribe to our mailing list</h2> <div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span> </label> 	<input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-FNAME&quot;>First Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-LNAME&quot;>Last Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;> </div> 	<div id=&quot;mce-responses&quot; class=&quot;clear&quot;> 		<div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div> 		<div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div> 	</div>    &lt;!&ndash; real people should not fill this in and expect good things - do not remove this or risk form bot signups&ndash;&gt;     <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_d4b3d090a4&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>     <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>     </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> &lt;!&ndash;End mc_embed_signup&ndash;&gt;">-->
                            <!--</iframe>-->
                        </form>
                        <span class="text-white">*We will <strong>never</strong> share your email address with third parties</span>
                    </div>
                </div>
            </div>


        </section>
    </section>


    <section id="variant-coming-soon-1" class="vim" vbp="divider,forms" vbr="Countdown Divider">
        <section class="signup-divider overlay parallax">
            <div class="background-image-holder parallax-background overlay">
                <img alt="Slide Background" class="background-image" src="../img/hero12.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 text-center">
                        <h1 class="text-white">We'll let you know when we're ready</h1>

                        <div class="countdown" data-date="2017/04/04">
                        </div>
                    </div>
                </div>
                <div class="row text-center">
                    <form class="form-newsletter" data-success="Thanks, we'll be in touch shortly."
                          data-error="Please provide a valid email address.">
                        <input type="text" class="input-transparent validate-required validate-email signup-email-field"
                               placeholder="Email Address Here" name="email">
                        <input type="submit" class="btn btn-filled" value="Invite Me Now">
                        <!--<iframe class="mail-list-form" srcdoc="&lt;!&ndash; Begin MailChimp Signup Form &ndash;&gt; <link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <style type=&quot;text/css&quot;> 	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id=&quot;mc_embed_signup&quot;> <form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;amp;id=d4b3d090a4&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>     <div id=&quot;mc_embed_signup_scroll&quot;> 	<h2>Subscribe to our mailing list</h2> <div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span> </label> 	<input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-FNAME&quot;>First Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-LNAME&quot;>Last Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;> </div> 	<div id=&quot;mce-responses&quot; class=&quot;clear&quot;> 		<div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div> 		<div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div> 	</div>    &lt;!&ndash; real people should not fill this in and expect good things - do not remove this or risk form bot signups&ndash;&gt;     <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_d4b3d090a4&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>     <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>     </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> &lt;!&ndash;End mc_embed_signup&ndash;&gt;">-->
                        <!--</iframe>-->
                    </form>
                    <span class="text-white">*We will <strong>never</strong> share your email address with third parties</span>
                </div>
            </div>


        </section>
    </section>

    <section id="variant-divider-7" class="vim" vbp="CTA" vbr="Short action strip">
        <section class="enquire-strip strip">

            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <span class="alt-font">Let's Make Sweet </span> <span class="alt-font color-love"><i
                            class="icon icon_heart"></i> Designs</span>
                        <span class="sub">Let's start something together</span>
                        <a class="btn" href="#">Enquire Now</a>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-divider-8" class="vim" vbp="text,divider" vbr="Stats divider">
        <section class="mr-can-parallax stats-large overlay">
            <div class="background-image-holder">
                <img alt="Slide Background" class="background-image" src="../img/hero15.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm-4 text-center">
                        <div class="stat" vht="parent">
                            <span class="number text-white">70+</span>

                            <h2 class="text-white">Content Blocks</h2>

                            <p class="lead text-white">
                                Over 2 thousand people have used the products that were built with this template.
                            </p>
                        </div>
                    </div>

                    <div class="col-sm-4 text-center">
                        <div class="stat" vht="parent">
                            <span class="number text-white">$185K</span>

                            <h2 class="text-white">Paid Out</h2>

                            <p class="lead text-white">
                                We have paid out over 185K in profits to contributors in 2014 alone.
                            </p>
                        </div>
                    </div>

                    <div class="col-sm-4 text-center">
                        <div class="stat" vht="parent">
                            <span class="number text-white">754</span>

                            <h2 class="text-white">Products</h2>

                            <p class="lead text-white">
                                Our makers have created over 700 products and delighted users globally.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-divider-9" class="vim" vbp="text,header" vbr="Title text divider">
        <section class="title-text-divider">

            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
                        <h2>A brief guide to making and<br> selling successful HTML templates</h2>
                        <h4>The things I wish people told me when I was starting out.</h4>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-divider-10" class="vim" vbp="divider,forms" vbr="Centered signup divider 2">
        <section class="no-pad signup-divider short">
            <div class="background-image-holder overlay">
                <img alt="Slide Background" class="background-image" src="../img/hero16.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 text-center">
                        <h5 class="text-white">Our new product is launching soon</h5>

                        <h2 class="text-white">Reliable partner in the processing of<br> all major credit cards sans
                            fees</h2>

                        <p class="text-white lead">Be the first to know about the launch of our fantastic new
                            product.</p>

                        <form class="form-newsletter" data-success="Thanks, we'll be in touch shortly"
                              data-error="Please provide a valid email address.">
                            <input type="text"
                                   class="input-transparent validate-required validate-email signup-email-field"
                                   placeholder="Email Address Here" name="email">
                            <input type="submit" class="btn btn-filled" value="Notify Me">
                            <!--<iframe class="mail-list-form" srcdoc="&lt;!&ndash; Begin MailChimp Signup Form &ndash;&gt; <link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <style type=&quot;text/css&quot;> 	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id=&quot;mc_embed_signup&quot;> <form action=&quot;//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&amp;amp;id=d4b3d090a4&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate>     <div id=&quot;mc_embed_signup_scroll&quot;> 	<h2>Subscribe to our mailing list</h2> <div class=&quot;indicates-required&quot;><span class=&quot;asterisk&quot;>*</span> indicates required</div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-EMAIL&quot;>Email Address  <span class=&quot;asterisk&quot;>*</span> </label> 	<input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email&quot; id=&quot;mce-EMAIL&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-FNAME&quot;>First Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;&quot; id=&quot;mce-FNAME&quot;> </div> <div class=&quot;mc-field-group&quot;> 	<label for=&quot;mce-LNAME&quot;>Last Name </label> 	<input type=&quot;text&quot; value=&quot;&quot; name=&quot;LNAME&quot; class=&quot;&quot; id=&quot;mce-LNAME&quot;> </div> 	<div id=&quot;mce-responses&quot; class=&quot;clear&quot;> 		<div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;></div> 		<div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;></div> 	</div>    &lt;!&ndash; real people should not fill this in and expect good things - do not remove this or risk form bot signups&ndash;&gt;     <div style=&quot;position: absolute; left: -5000px;&quot;><input type=&quot;text&quot; name=&quot;b_77142ece814d3cff52058a51f_d4b3d090a4&quot; tabindex=&quot;-1&quot; value=&quot;&quot;></div>     <div class=&quot;clear&quot;><input type=&quot;submit&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; id=&quot;mc-embedded-subscribe&quot; class=&quot;button&quot;></div>     </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> &lt;!&ndash;End mc_embed_signup&ndash;&gt;">-->
                            <!--</iframe>-->
                        </form>
                    </div>
                </div>
            </div>


        </section>
    </section>

    <section id="variant-divider-11" class="vim" vbp="divider,CTA" vbr="Device divider 1">
        <section class="device-divider-1">
            <div class="background-image-holder">
                <img alt="Slide Background" class="background-image" src="../img/grey-bg.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-sm-6 vertical-align col-sm-push-6">
                        <h2>Our latest app is straight rockin'</h2>

                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                            laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                            architecto beatae vitae dicta sunt explicabo. asperiores repellat.
                        </p>
                        <a class="text-link" href="#">More Features <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                        <a class="text-link" href="#">Purchase Now <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>

                    <div class="col-sm-6 col-sm-pull-6">
                        <img alt="Device Image" src="../img/phone.png">
                    </div>

                </div>
            </div>

        </section>
    </section>

    <section id="variant-divider-12" class="vim" vbp="video" vbr="Embedded Video 1">
        <section class="action-strip-2 video-strip">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <div class="pre-video">
                            <i class="icon pe-7s-play"></i>

                            <h2>Watch the video</h2>
                        </div>

                        <div class="iframe-holder">
                            <i class="close-frame pe-7s-close-circle"></i>
                            <iframe src="http://player.vimeo.com/video/108018156?color=ffffff?badge=0&title=0&byline=0"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-divider-13" class="vim" vbp="divider" vbr="Short action strip 2">
        <section class="action-strip-2">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <h2>Fire your text editor.</h2>
                        <a class="btn" href="http://machine.mediumra.re/variant/builder.html">Build with Variant</a>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-divider-14" class="vim" vbp="divider,text" vbr="Check features on image">
        <section class="action-strip-3 double-pad parallax">
            <div class="background-image-holder parallax-background">
                <img alt="Slide Background" class="background-image" src="../img/hero18.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-xs-12 text-center">
                        <h2 class="text-white">More reasons to choose Machine.</h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-4">
                        <div class="check-feature" vht="parent">
                            <i class="icon pe-7s-check text-white"></i>
                            <h5 class="text-white">Variant page builder<br> makes setup a breeze</h5>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="check-feature" vht="parent">
                            <i class="icon pe-7s-check text-white"></i>
                            <h5 class="text-white">Consistent element set<br> gives you true flexibility</h5>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="check-feature" vht="parent">
                            <i class="icon pe-7s-check text-white"></i>
                            <h5 class="text-white">Top-notch support provided<br> via a dedicated forum</h5>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 text-center">
                        <i class="icon pe-7s-cart text-white"></i>
                        <a class="text-link text-white" href="#">Grab a copy of Machine now <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-divider-15" class="vim" vbp="divider" vbr="Image quick links">
        <section class="no-pad">
            <div class="col-sm-4">
                <div class="image-tile" vht="parent">
                    <div class="background-image-holder overlay">
                        <img alt="Slide Background" class="background-image"
                             src="https://unsplash.imgix.net/reserve/D8ijGd3CSGq4BxJ9EzTf_13976945916_fa0ce84ee3_o.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050">
                    </div>
                    <div class="content">
                        <a href="#">
                            <h2 class="text-white">San Francisco</h2>

                            <p class="text-white">
                                Welcome to our base of operations
                            </p>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="image-tile" vht="parent">
                    <div class="background-image-holder overlay">
                        <img alt="Slide Background" class="background-image"
                             src="https://unsplash.imgix.net/reserve/tdedkQnQGCgIhk9eoEkP_DSC_0983.JPG?fit=crop&fm=jpg&h=700&q=75&w=1050">
                    </div>
                    <div class="content">
                        <a href="#">
                            <h2 class="text-white">Sunrise Somewhere</h2>

                            <p class="text-white">
                                Go boldly, without boundaries
                            </p>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-4 image-tile-wrapper">
                <div class="image-tile">
                    <div class="background-image-holder overlay" vht=".image-tile-wrapper">
                        <img alt="Slide Background" class="background-image"
                             src="https://unsplash.imgix.net/uploads/1412825195419af52b492/8bc72ed7?fit=crop&fm=jpg&h=700&q=75&w=1050">
                    </div>
                    <div class="content">
                        <a href="#">
                            <h2 class="text-white">Intrepid Adventure</h2>

                            <p class="text-white">
                                Seek solace in solitude
                            </p>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-divider-16" class="vim" vbp="divider,CTA" vbr="CTA with split button">
        <section class="dark-action mr-can-parallax">

            <div class="background-image-holder">
                <img alt="Slide Background" class="background-image" src="../img/hero17.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <h2 class="text-white">Start building your site for just $18 USD.</h2>

                        <p class="text-white">
                            Download package includes both Machine template and <a href="http://www.mrare.co/variant"
                                                                                   class="inline-link">Variant</a> Page
                            Builder
                        </p>
                        <a class="btn btn-white btn-filled" href="#">Purchase now from Themeforest</a>
                        <a class="btn btn-white btn-filled" href="#">Learn more about Variant</a>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-divider-17" class="vim" vbp="divider,text" vbr="Simple image + text divider">
        <section class="mr-can-parallax double-pad">
            <div class="background-image-holder overlay">
                <img alt="Slide Background" class="background-image" src="../img/hero19.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-sm-7">
                        <h2 class="text-white">Build stunning layouts.<br> Customize content easily.</h2>

                        <p class="text-white lead">
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                            laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                            aspernatur aut odit aut fugit.
                        </p>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-divider-18" class="vim" vbp="divider" vbr="Clients divider">
        <section class="clients-1">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <div class="text-block">
                            <p class="super-lead text-white">A few of the many valued clients we've had the pleasure to
                                work with.</p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3 col-sm-6 text-center">
                        <img alt="Client" src="../img/c1.png" vht="parent">
                    </div>

                    <div class="col-md-3 col-sm-6 text-center">
                        <img alt="Client" src="../img/c2.png" vht="parent">
                    </div>

                    <div class="col-md-3 col-sm-6 text-center">
                        <img alt="Client" src="../img/c3.png" vht="parent">
                    </div>

                    <div class="col-md-3 col-sm-6 text-center">
                        <img alt="Client" src="../img/c4.png" vht="parent">
                    </div>

                </div>
            </div>
        </section>
    </section>

    <section id="variant-divider-19" class="vim" vbp="divider" vbr="Half-width image features">
        <section class="no-pad">
            <div class="col-md-6 feature-box">
                <div class="background-image-holder">
                    <img alt="Slide Background" class="background-image" src="../img/shop1.jpg">
                </div>

                <div class="content">
                    <h3 class="text-white">Save up big on<br> this season's looks</h3>

                    <p class="text-white">Up to 50% off our summer catalogue.</p>
                    <a class="btn btn-white btn-sm" href="#">Shop Now</a>
                </div>
            </div>

            <div class="col-md-6 feature-box">
                <div class="background-image-holder overlay-light-gradient">
                    <img alt="Slide Background" class="background-image" src="../img/shop3.jpg">
                </div>

                <div class="content">
                    <h3>Don't miss out on our<br> final winter markdowns</h3>

                    <p>Shop our chic, flexible workwear looks.</p>
                    <a class="btn btn-sm" href="#">Shop Now</a>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-gallery-1" class="vim" vbp="gallery" vbr="Large project previews">
        <section class="no-pad fullscreen-projects">

            <div class="project col-sm-6 image-holder voh">
                <div class="background-image-holder">
                    <img alt="Project Image" class="background-image" src="../img/work2.jpg">
                </div>
                <div class="hover-state text-center" vht=".project">
                    <a href="#" class="vertical-align">
                        <div class="hover-content">
                            <div class="detail-line"></div>
                            <h5 class="text-white">The Spice People</h5>
                            <h4 class="text-white">A spicy rebranding<br> for this San Fran icon</h4>
                            <i class="icon ti ti-arrow-right arrow_right"></i>
                        </div>
                    </a>
                </div>
            </div>

            <div class="project col-sm-6 image-holder voh">
                <div class="background-image-holder">
                    <img alt="Project Image" class="background-image" src="../img/work1.jpg">
                </div>
                <div class="hover-state text-center" vht=".project">
                    <a href="#" class="vertical-align">
                        <div class="hover-content">
                            <div class="detail-line"></div>
                            <h5 class="text-white">Fit For Life</h5>
                            <h4 class="text-white">A positive new image<br> for this fitness startup</h4>
                            <i class="icon ti ti-arrow-right arrow_right"></i>
                        </div>
                    </a>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-gallery-2" class="vim" vbp="gallery" vbr="Large text intro">
        <section class="text-hero">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Recent Case Study</h5>

                            <h1 class="contrast-h1"><strong>Fit For Life</strong> - An intuitive new way for fitness
                                trainers to #connect with colleagues</h1>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <p class="lead">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua.
                        </p>
                    </div>

                    <div class="col-sm-6">
                        <p class="lead">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                            ut labore et dolore magna aliqua.
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-gallery-3" class="vim" vbp="gallery" vbr="Featured project">
        <section class="hero-project">
            <div class="background-image-holder">
                <img alt="Slide Background" class="background-image" src="../img/hero8.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-7">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5 class="text-white">TCHR</h5>

                            <h2 class="text-white">A forward thinking, web-based solution that improves teacher
                                workflow.</h2>
                        </div>
                        <p class="text-white">
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                            laudantium, totam rem aperiam
                        </p>
                        <a class="text-link text-white" href="#">View the case study <i
                                class="icon ti ti-arrow-right arrow_right"></i></a>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-gallery-4" class="vim" vbp="gallery" vbr="Lightbox gallery">
        <section class="lightbox-gallery1">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center">
                        <h2>Built with Machine</h2>
                        <h5>A template that's shaking things up</h5>

                        <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                            laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                            architecto beatae vitae dicta sunt explicabo. asperiores repellat.
                        </p>
                    </div>
                </div>

                <div class="row">
                    <div class="lightbox-container">
                        <div class="col-md-8 col-sm-12">
                            <a href="../img/hero5.jpg" class="ven" data-lightbox="true" data-title="Image Title">
                                <div class="background-image-holder veo">
                                    <img alt="Lightbox Image" class="background-image" src="../img/hero5.jpg">
                                </div>
                            </a>
                        </div>

                        <div class="col-md-4 col-sm-6">
                            <a href="../img/hero3.jpg" class="ven" data-lightbox="true" data-title="Image Title">
                                <div class="background-image-holder veo">
                                    <img alt="Lightbox Image" class="background-image" src="../img/hero3.jpg">
                                </div>
                            </a>

                            <a href="../img/hero4.jpg" class="ven" data-lightbox="true" data-title="Image Title">
                                <div class="background-image-holder veo">
                                    <img alt="Lightbox Image" class="background-image" src="../img/hero4.jpg">
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </section>

    <section id="variant-gallery-6" class="vim" vbp="gallery" vbr="Contained projects">
        <section class="contained-projects">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Our Work</h5>

                            <h2>Recent projects completed<br> for our fabulous clients</h2>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <ul class="filters">

                        </ul>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-6 project voh" data-filter="web">
                        <a href="#">
                            <div class="background-image-holder" vht=".project">
                                <!--<img alt="project image" class="background-image" src="https://s3.amazonaws.com/deathtostock/photos/files/000/000/532/large/DeathtoStock_Creative_Community3.jpg?1415037250">-->
                            </div>
                        </a>

                        <h2>Huddle</h2>
                        <span>Branding, Design, Strategy</span>
                        <h5>A place where innovative ideas and collaboration reign supreme.</h5>
                    </div>

                    <div class="col-md-4 col-sm-6 project voh" data-filter="development">
                        <a href="#">
                            <div class="background-image-holder" vht=".project">
                                <img alt="project image" class="background-image"
                                     src="https://d13yacurqjgara.cloudfront.net/users/665899/screenshots/1793626/restaurant.jpg">
                            </div>
                        </a>

                        <h2>Zeen</h2>
                        <span>iOS / Android Development, Marketing</span>
                        <h5>The most addictive new way to consume content on a tablet device.</h5>
                    </div>

                    <div class="col-md-4 col-sm-6 project voh" data-filter="branding">
                        <a href="#">
                            <div class="background-image-holder" vht=".project">
                                <img alt="project image" class="background-image"
                                     src="https://d13yacurqjgara.cloudfront.net/users/45135/screenshots/1792406/shot.jpg">
                            </div>
                        </a>

                        <h2>On Track</h2>
                        <span>iOS Development, UI / UX Design, Strategy</span>
                        <h5>The training buddy that never leaves you hanging.</h5>
                    </div>

                    <div class="col-md-4 col-sm-6 project voh" data-filter="branding,development">
                        <a href="#">
                            <div class="background-image-holder" vht=".project">
                                <img alt="project image" class="background-image" src="../img/work1.jpg">
                            </div>
                        </a>

                        <h2>Fit For Life</h2>
                        <span>iOS Development, UI / UX Design, Strategy</span>
                        <h5>A positive new image for this disruptive fitness startup.</h5>
                    </div>

                    <div class="col-md-4 col-sm-6 project voh" data-filter="branding,development">
                        <a href="#">
                            <div class="background-image-holder" vht=".project">
                                <img alt="project image" class="background-image" src="../img/work2.jpg">
                            </div>
                        </a>

                        <h2>The Spice People</h2>
                        <span>Web Design, Branding & Identity</span>
                        <h5>A spicy rebranding for this gourmet San Fran icon.</h5>
                    </div>

                    <div class="col-md-4 col-sm-6 project voh" data-filter="branding,development">
                        <a href="#">
                            <div class="background-image-holder" vht=".project">
                                <img alt="project image" class="background-image" src="../img/hero3.jpg">
                            </div>
                        </a>

                        <h2>Agora</h2>
                        <span>iOS Development, UI / UX Design, Strategy</span>
                        <h5>An innovative new photo sharing app for adventure lovers.</h5>
                    </div>

                </div>
            </div>
        </section>
    </section>

    <section id="variant-team-1" class="vim" vbp="team" vbr="Team single dark">
        <section class="team-1-single dark-bg">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-md-offset-1 col-sm-6">
                        <h3 class="text-white">Petrov Vasili</h3>
                        <span class="alt-font sub">Creative Director</span>

                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                            voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi
                        </p>

                        <p>
                            Quos dolores et quas molestias excepturi sint occaecati.
                        </p>
                        <ul class="social-links">
                            <li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
                            <li><a href="#"><i class="icon ti ti-facebook"></i></a></li>
                            <li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
                        </ul>
                    </div>

                    <div class="col-sm-6 text-center">
                        <img alt="Team Member" src="../img/team1-bw.png">
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-team-2" class="vim" vbp="team" vbr="Team single light">
        <section class="team-1-single">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-md-offset-1 col-sm-6">
                        <h3>Jihen So</h3>
                        <span class="alt-font sub">Development Lead</span>

                        <p>
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                            voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi
                        </p>

                        <p>
                            Quos dolores et quas molestias excepturi sint occaecati.
                        </p>
                        <ul class="social-links">
                            <li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
                            <li><a href="#"><i class="icon ti ti-facebook"></i></a></li>
                            <li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
                        </ul>
                    </div>

                    <div class="col-sm-6 text-center">
                        <img alt="Team Member" src="../img/team2-bw.png">
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-team-3" class="vim" vbp="team,text" vbr="Multiple team members">
        <section class="team-2">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Meet Our Team</h5>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-6 team-member voh">
                        <img alt="team member" src="../img/team-square1.jpg">

                        <h3>Jihen So</h3>
                        <span>Creative Director</span>

                        <p>
                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
                            quod maxime placeat facere possimus, omnis voluptas.
                        </p>
                    </div>

                    <div class="col-md-4 col-sm-6 team-member voh">
                        <img alt="team member" src="../img/team-square2.jpg">

                        <h3>Sven Hauck</h3>
                        <span>Lead Developer</span>

                        <p>
                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
                            quod maxime placeat facere possimus, omnis voluptas.
                        </p>
                    </div>

                    <div class="col-md-4 col-sm-6 team-member voh">
                        <img alt="team member" src="../img/team-square3.jpg">

                        <h3>Petrov Vasili</h3>
                        <span>Branding Expert</span>

                        <p>
                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
                            quod maxime placeat facere possimus, omnis voluptas.
                        </p>
                    </div>
                </div>


            </div>
        </section>
    </section>

    <section id="variant-blog-1" class="vim" vbp="text,blog" vbr="Blog snippets 1">
        <section class="blog-snippets-1">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>News & Views</h5>
                            <h4>Latest thoughts + musings from the team.</h4>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="blog-snippet-1" vht="parent">
                            <span class="date alt-font uppercase">November 6th 2014</span>
                            <h5>The ultimate guide on how to<br> build your own website.</h5>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation.
                            </p>
                            <a class="text-link" href="#">Read the rest<i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="blog-snippet-1" vht="parent">
                            <span class="date alt-font uppercase">October 31st 2014</span>
                            <h5>An interesting new way to handle<br> vertical media queries.</h5>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation.
                            </p>
                            <a class="text-link" href="#">Read the rest<i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="blog-snippet-1 image-snippet overlay" vht="parent">

                            <div class="background-image-holder">
                                <img alt="Slide Background" class="background-image" src="../img/blog-square1.jpg">
                            </div>

                            <span class="date alt-font uppercase">October 25th 2014</span>
                            <h5>Why getting away from the screen<br> is as good as a holiday.</h5>

                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation.
                            </p>
                            <a class="text-link" href="#">Read the rest<i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-blog-2" class="vim" vbp="text,blog" vbr="Blog snippets 2">
        <section class="blog-snippets-2">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="blog-snippet-2">
                            <a href="#">
                                <div class="background-image-holder" vht=".blog-snippet-2">
                                    <img alt="Slide Background" class="background-image" src="../img/blog-large1.jpg">
                                </div>
                            </a>

                            <div class="description" vht=".blog-snippet-2">
                                <div class="meta">
                                    <span class="date">24th November 2014 by <a href="#">Craig Garner</a></span>
                                    <ul class="tag-list">
                                        <li>
                                            <a class="btn btn-sm" href="#">Lifestyle</a>
                                        </li>

                                        <li>
                                            <a class="btn btn-sm" href="#">Photography</a>
                                        </li>

                                        <li>
                                            <a class="btn btn-sm" href="#">Design</a>
                                        </li>
                                    </ul>
                                </div>
                                <h3>Staying productive in the age of distraction</h3>

                                <p>
                                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                                    praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
                                    excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
                                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                                    rerum facilis est et expedita distinctio.
                                </p>
                                <a href="#" class="btn btn-sm">Read More</a>
                            </div>
                        </div>

                        <div class="blog-snippet-2">
                            <a href="#">
                                <div class="background-image-holder" vht=".blog-snippet-2">
                                    <img alt="Slide Background" class="background-image" src="../img/hero6.jpg">
                                </div>
                            </a>

                            <div class="description" vht=".blog-snippet-2">
                                <div class="meta">
                                    <span class="date">21st November 2014 by <a href="#">James Hillier</a></span>
                                    <ul class="tag-list">
                                        <li>
                                            <a class="btn btn-sm" href="#">Lifestyle</a>
                                        </li>

                                        <li>
                                            <a class="btn btn-sm" href="#">Photography</a>
                                        </li>

                                        <li>
                                            <a class="btn btn-sm" href="#">Design</a>
                                        </li>
                                    </ul>
                                </div>
                                <h3>Couples that knit together stay together</h3>

                                <p>
                                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
                                    praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
                                    excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
                                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                                    rerum facilis est et expedita distinctio.
                                </p>
                                <a href="#" class="btn btn-sm">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 text-center">
                        <ul class="pagination">
                            <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </section>
    </section>

    <section id="variant-blog-3" class="vim" vbp="text,blog" vbr="Article Single">
        <section class="article-wrapper">
            <div class="container">
                <div class="row">
                    <div class="col-md-2 col-sm-3 text-center">
                        <img alt="Author Avatar" class="avatar" src="../img/avatar.png">
                        <span>by </span><span class="alt-font uppercase author-name">James Hillier</span>
                    </div>

                    <div class="col-md-8 col-sm-9">
                        <div class="article-single">
                            <div class="text-block">
                                <div class="detail-line"></div>
                                <h5>November 6 2014</h5>
                                <h4>It's time for serious change - abandon coal!</h4>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                            </p>

                            <p>
                                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                                mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit
                                voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
                                inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                            </p>

                            <h3 class="alt-font uppercase">An additional sub heading</h3>

                            <p>
                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
                                quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
                                quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
                                voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
                                suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
                                reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
                                qui dolorem eum fugiat quo voluptas nulla pariatur?
                            </p>

                            <p>
                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
                                occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
                                mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
                                expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque
                                nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
                                est, omnis dolor repellendus.
                            </p>

                            <h3 class="alt-font uppercase">A few closing thoughts</h3>

                            <p>
                                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
                                id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
                                repellendus.
                            </p>

                            <ul class="bullets">
                                <li>Temporibus autem quibusdam et aut officiis debitis</li>
                                <li>Itaque earum rerum hic tenetur a sapiente</li>
                                <li>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur</li>
                            </ul>

                            <blockquote>
                                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
                                id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
                                repellendus.
                            </blockquote>

                            <p>
                                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
                                id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
                                repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
                                saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque
                                earum.
                            </p>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-social-1" class="vim" vbp="social" vbr="Twitter feed 1">
        <section class="twitter-1">
            <div class="container">
                <div class="row">
                    <div class="col-md-7 col-sm-9">
                        <i class="icon ti ti-twitter-alt text-white"></i>

                        <div class="twitter-feed">
                            <div class="tweets-feed tweets-slider" data-widget-id="492085717044981760">

                            </div>
                        </div>
                        <span class="text-white">Follow <a href="#">@mediumrare</a> for more updates</span>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-social-2" class="vim" vbp="social" vbr="Twitter feed 2">
        <section class="twitter-2">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 col-sm-12 text-center">
                        <i class="icon ti ti-twitter-alt"></i>

                        <div class="twitter-feed">
                            <div class="tweets-feed tweets-slider" data-widget-id="492085717044981760">

                            </div>
                        </div>
                        <span>Follow <a href="#">@mediumrare</a> for more updates</span>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-social-3" class="vim" vbp="social" vbr="Instagram gallery 1">
        <section class="instagram-1">
            <div class="instafeed" data-user-name="flatfilthy">
                <ul></ul>
            </div>

            <div class="container vertical-align">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <a href="#">
                            <h2><i class="icon social_instagram"></i> machinetheme</h2><br>
                            <span>Follow us for updates</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-pricing-1" class="vim" vbp="pricing" vbr="Pricing table dropdowns">
        <section class="pricing-1">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-4 pricing-table-1">
                            <div class="pricing-header">
                                <h5 class="text-white">Basic<br> Package</h5>

                                <div class="price">
                                    <span class="dollar text-white">$</span>
                                    <span class="amount text-white">49</span>
                                    <span class="alt-font uppercase text-white">Per Month</span>
                                </div>
                            </div>
                            <div class="pricing-details">
                                <ul>
                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">200GB Secure Storage</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">10 Unique Logins</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">24/7 Online Support</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">99.9% Uptime Guarantee</span>
                                    </li>
                                </ul>
                                <a class="text-link text-white" href="#">More Info <i
                                        class="icon ti ti-arrow-right arrow_right"></i></a>
                                <a class="text-link text-white" href="#">Sign Up Now <i
                                        class="icon ti ti-arrow-right arrow_right"></i></a>
                            </div>
                        </div>

                        <div class="col-md-4 pricing-table-1">
                            <div class="pricing-header">
                                <h5 class="text-white">Value<br> Package</h5>

                                <div class="price">
                                    <span class="dollar text-white">$</span>
                                    <span class="amount text-white">69</span>
                                    <span class="alt-font uppercase text-white">Per Month</span>
                                </div>
                            </div>
                            <div class="pricing-details">
                                <ul>
                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">500GB Secure Storage</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">40 Unique Logins</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">24/7 Online Support</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">99.9% Uptime Guarantee</span>
                                    </li>
                                </ul>
                                <a class="text-link text-white" href="#">More Info <i
                                        class="icon ti ti-arrow-right arrow_right"></i></a>
                                <a class="text-link text-white" href="#">Sign Up Now <i
                                        class="icon ti ti-arrow-right arrow_right"></i></a>
                            </div>
                        </div>

                        <div class="col-md-4 pricing-table-1">
                            <div class="pricing-header">
                                <h5 class="text-white">Heavy<br> Package</h5>

                                <div class="price">
                                    <span class="dollar text-white">$</span>
                                    <span class="amount text-white">99</span>
                                    <span class="alt-font uppercase text-white">Per Month</span>
                                </div>
                            </div>
                            <div class="pricing-details">
                                <ul>
                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">900GB Secure Storage</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">100 Unique Logins</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">24/7 Online Support</span>
                                    </li>

                                    <li>
                                        <i class="icon pe-7s-check text-white"></i>
                                        <span class="text-white">99.9% Uptime Guarantee</span>
                                    </li>
                                </ul>
                                <a class="text-link text-white" href="#">More Info <i
                                        class="icon ti ti-arrow-right arrow_right"></i></a>
                                <a class="text-link text-white" href="#">Sign Up Now <i
                                        class="icon ti ti-arrow-right arrow_right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-pricing-2" class="vim" vbp="pricing" vbr="Pricing table traditional">
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Pricing Options</h5>
                            <h4>Select the plan that best suits your needs</h4>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12 pricing-tables-2">
                        <div class="col-sm-4">
                            <div class="pricing-table-2" vht="parent">
                                <h2 class="uppercase">Basic Plan</h2>
                                <ul>
                                    <li>20GB Storage</li>
                                    <li>Unlimited Updates</li>
                                    <li>Premium Support</li>
                                    <li>20 Unique Logins</li>
                                </ul>
                                <span class="price">$99</span>

                                <div class="action">
                                    <a href="#">
                                        <span class="alt-font uppercase">Subscribe Now</span>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="pricing-table-2" vht="parent">
                                <h2 class="uppercase">Value Plan</h2>
                                <ul>
                                    <li>50GB Storage</li>
                                    <li>Unlimited Updates</li>
                                    <li>Premium Support</li>
                                    <li>80 Unique Logins</li>
                                </ul>
                                <span class="price">$149</span>

                                <div class="action">
                                    <a href="#">
                                        <span class="alt-font uppercase">Subscribe Now</span>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-4">
                            <div class="pricing-table-2" vht="parent">
                                <h2 class="uppercase">Heavy Plan</h2>
                                <ul>
                                    <li>100GB Storage</li>
                                    <li>Unlimited Updates</li>
                                    <li>Premium Support</li>
                                    <li>100 Unique Logins</li>
                                </ul>
                                <span class="price">$239</span>

                                <div class="action">
                                    <a href="#">
                                        <span class="alt-font uppercase">Subscribe Now</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-shop-1" class="vim" vbp="shop" vbr="Product grid">
        <section class="products-1">
            <div class="container">
                <div class="row">
                    <div class="upper-meta">
                        <div class="col-sm-6">
                            <span class="paging-detail">Showing 1-12 of 16 results</span>
                        </div>

                        <div class="col-sm-6 text-right">
                            <span>Sort by</span>
                            <select>
                                <option value="price-lowest">Lowest Price</option>
                                <option value="price-highest">Highest Price</option>
                                <option value="recent">New Stock</option>
                                <option value="sale">Sale Items</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="product-container">
                        <div class="col-md-4 col-sm-6">
                            <div class="product" vht="parent">
                                <div class="product-image">
                                    <div class="background-image-holder">
                                        <img alt="Product Image" src="../img/product1.jpg">
                                    </div>

                                    <div class="hover-state">
                                        <div class="hover-content">
                                            <a href="#" class="btn btn-white btn-sm">Item Details</a>
                                            <a href="#" class="btn btn-white btn-sm">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                                <h5>WooThemes Poster</h5><br>
                                <span>Available in all sizes</span>
                                <span class="price">$35</span>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6">
                            <div class="product" vht="parent">
                                <div class="product-image">
                                    <span class="label">Reduced</span>

                                    <div class="background-image-holder">
                                        <img alt="Product Image" src="../img/product2.jpg">
                                    </div>

                                    <div class="hover-state">
                                        <div class="hover-content">
                                            <a href="#" class="btn btn-white btn-sm">Item Details</a>
                                            <a href="#" class="btn btn-white btn-sm">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                                <h5>Ultimate Ninja T-Shirt</h5><br>
                                <span>Available in all sizes</span>
                                <span class="price">$19</span>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6">
                            <div class="product" vht="parent">
                                <div class="product-image">
                                    <div class="background-image-holder">
                                        <img alt="Product Image" src="../img/product3.jpg">
                                    </div>

                                    <div class="hover-state">
                                        <div class="hover-content">
                                            <a href="#" class="btn btn-white btn-sm">Item Details</a>
                                            <a href="#" class="btn btn-white btn-sm">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                                <h5>Black Ninja Hoodie</h5><br>
                                <span>Available in all sizes</span>
                                <span class="price">$25</span>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6">
                            <div class="product" vht="parent">
                                <div class="product-image">
                                    <div class="background-image-holder">
                                        <img alt="Product Image" src="../img/product4.jpg">
                                    </div>

                                    <div class="hover-state">
                                        <div class="hover-content">
                                            <a href="#" class="btn btn-white btn-sm">Item Details</a>
                                            <a href="#" class="btn btn-white btn-sm">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                                <h5>Rose Ninja Hoodie</h5><br>
                                <span>Available in all sizes</span>
                                <span class="price">$39</span>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6">
                            <div class="product" vht="parent">
                                <div class="product-image">
                                    <div class="background-image-holder">
                                        <img alt="Product Image" src="../img/product5.jpg">
                                    </div>

                                    <div class="hover-state">
                                        <div class="hover-content">
                                            <a href="#" class="btn btn-white btn-sm">Item Details</a>
                                            <a href="#" class="btn btn-white btn-sm">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                                <h5>Pirates Hoodie</h5><br>
                                <span>Available in all sizes</span>
                                <span class="price">$39</span>
                            </div>
                        </div>

                        <div class="col-md-4 col-sm-6">
                            <div class="product" vht="parent">
                                <div class="product-image">
                                    <span class="label">New</span>

                                    <div class="background-image-holder">
                                        <img alt="Product Image" src="../img/product6.jpg">
                                    </div>

                                    <div class="hover-state">
                                        <div class="hover-content">
                                            <a href="#" class="btn btn-white btn-sm">Item Details</a>
                                            <a href="#" class="btn btn-white btn-sm">Add To Cart</a>
                                        </div>
                                    </div>
                                </div>
                                <h5>Woo Album</h5><br>
                                <span>Available in all formats</span>
                                <span class="price">$17</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 text-center">
                        <ul class="pagination">
                            <li><a href="#"><span aria-hidden="true">&laquo;</span><span class="sr-only">Previous</span></a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#"><span aria-hidden="true">&raquo;</span><span class="sr-only">Next</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-shop-2" class="vim" vbp="shop" vbr="Product single">
        <section class="product-single-1">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="image-slider">
                            <ul class="slides">
                                <li>
                                    <a href="../img/product1.jpg" data-lightbox="true" data-title="Woo Poster">
                                        <span class="label">New</span>

                                        <div class="background-image-holder">
                                            <img alt="Product Image" src="../img/product1.jpg">
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="../img/product2.jpg" data-lightbox="true" data-title="Ninja Tshirt">
                                        <div class="background-image-holder">
                                            <img alt="Product Image" src="../img/product2.jpg">
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="../img/product3.jpg" data-lightbox="true" data-title="Black Ninja Hoodie">
                                        <div class="background-image-holder">
                                            <img alt="Product Image" src="../img/product3.jpg">
                                        </div>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="product-details">
                            <h2>WooThemes Poster</h2>
                            <span class="price">$29</span>

                            <div class="reviews">
                                <ul class="stars">
                                    <li><i class="icon_star"></i></li>
                                    <li><i class="icon_star"></i></li>
                                    <li><i class="icon_star"></i></li>
                                    <li><i class="icon_star"></i></li>
                                    <li><i class="icon_star-half"></i></li>
                                </ul>
                                <a href="#">(Based on 3 reviews)</a>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation ullamco laboris.
                            </p>

                            <ul class="bullets">
                                <li>Temporibus autem quibusdam et aut officiis debitis</li>
                                <li>Itaque earum rerum hic tenetur a sapiente</li>
                                <li>Neque porro quisquam est, qui dolorem ipsum quia</li>
                            </ul>

                            <ul class="expanding-list">
                                <li>
                                    <span class="title">Sizing Info</span>

                                    <div class="content">
                                        <p>
                                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                                            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
                                        </p>
                                    </div>
                                </li>

                                <li>
                                    <span class="title">Customer Reviews (3)</span>

                                    <div class="content">
                                        <div class="review">
                                            <ul class="stars">
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star-half"></i></li>
                                            </ul>
                                            <span class="author">by Craig Garner</span>

                                            <p>
                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                                                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident.
                                            </p>
                                        </div>

                                        <div class="review">
                                            <ul class="stars">
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star-half"></i></li>
                                            </ul>
                                            <span class="author">by James Hillier</span>

                                            <p>
                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                                                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident.
                                            </p>
                                        </div>

                                        <div class="review">
                                            <ul class="stars">
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star"></i></li>
                                                <li><i class="icon_star"></i></li>
                                            </ul>
                                            <span class="author">by Maximus Paws</span>

                                            <p>
                                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                                                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                                proident.
                                            </p>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                            <form class="add-to-cart">
                                <div class="quantity-controls">
                                    <div class="less">-</div>
                                    <input name="quantity" type="text" value="1">

                                    <div class="more">+</div>
                                </div>
                                <input class="btn btn-sm" type="submit" value="Add to cart">
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </section>

    <section id="variant-contact-1" class="vim" vbp="contact" vbr="Contact simple">
        <section class="contact-1">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Contact Us</h5>
                            <h4>Get in touch today</h4>

                            <p>
                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum deleniti atque corrupti quos dolores et quas.
                            </p>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <div class="contact-method">
                            <i class="icon pe-7s-phone"></i>
                            <span>+614 3742 389</span>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <div class="contact-method">
                            <i class="icon pe-7s-mail-open-file"></i>
                            <span>hello@machine.net</span>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <div class="contact-method">
                            <i class="icon pe-7s-map-marker"></i>
                            <span>300 Collins St<br> Melbourne, 3000</span>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </section>

    <section id="variant-contact-2" class="vim" vbp="contact,forms" vbr="Contact simple with form">
        <section class="contact-2">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Contact Us</h5>
                            <h4>Get in touch today</h4>

                            <p>
                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
                                voluptatum deleniti atque corrupti quos dolores et quas.
                            </p>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <div class="contact-method">
                            <i class="icon pe-7s-phone"></i>
                            <span>+614 3742 389</span>
                        </div>

                        <div class="contact-method">
                            <i class="icon pe-7s-mail-open-file"></i>
                            <span>hello@machine.net</span>
                        </div>

                        <div class="contact-method">
                            <i class="icon pe-7s-map-marker"></i>
                            <span>300 Collins St<br> Melbourne, 3000</span>
                        </div>
                    </div>

                    <div class="col-md-5 col-sm-12">
                        <form class="form-email" data-success="Thanks for your enquiry, we'll be in touch shortly."
                              data-error="Please fill all fields correctly.">
                            <input class="input-standard validate-required" type="text" name="name"
                                   placeholder="Your Name">
                            <input class="input-standard validate-email validate-required" type="text" name="email"
                                   placeholder="Email Address">
                            <textarea class="input-standard validate-required" name="message" placeholder="Your Message"
                                      rows="4"></textarea>
                            <input type="submit" class="btn btn-sm" value="Send Message">
                        </form>
                    </div>

                </div>
            </div>
        </section>
    </section>

    <section id="variant-contact-3" class="vim" vbp="contact,forms" vbr="Project Planner">
        <section>
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-sm-6">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Project Planner</h5>
                            <h4>Tell us a little about your idea</h4>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <form class="project-planner" data-success="Thanks for your enquiry, we'll be in touch shortly."
                              data-error="Please fill all fields correctly.">
                            <h5>My project involves:</h5>

                            <div class="options">
                                <div class="planner-option">
                                    <span>Web Development</span>
                                    <i class="pe-7s-check"></i>
                                    <input class="validate-required" type="checkbox" name="service[]" value="">
                                </div>

                                <div class="planner-option">
                                    <span>SEO Management</span>
                                    <i class="pe-7s-check"></i>
                                    <input type="checkbox" name="service[]" value="">
                                </div>

                                <div class="planner-option">
                                    <span>Copywriting</span>
                                    <i class="pe-7s-check"></i>
                                    <input type="checkbox" name="service[]" value="">
                                </div>

                                <div class="planner-option">
                                    <span>Photography</span>
                                    <i class="pe-7s-check"></i>
                                    <input type="checkbox" name="service[]" value="">
                                </div>

                                <div class="planner-option">
                                    <span>Copywriting</span>
                                    <i class="pe-7s-check"></i>
                                    <input type="checkbox" name="service[]" value="">
                                </div>

                                <div class="planner-option">
                                    <span>Photography</span>
                                    <i class="pe-7s-check"></i>
                                    <input type="checkbox" name="service[]" value="">
                                </div>
                            </div>

                            <hr>

                            <div class="col-sm-6">
                                <div class="radio-group">
                                    <span class="title">My estimated timeframe is around</span>

                                    <div class="planner-radio">
                                        <div class="mock-radio">
                                            <div class="radio-outer">
                                                <div class="radio-inner"></div>
                                            </div>
                                        </div>
                                        <span>4 Weeks</span>
                                        <input type="radio" name="timeframe" value="">
                                    </div>

                                    <div class="planner-radio">
                                        <div class="mock-radio active">
                                            <div class="radio-outer">
                                                <div class="radio-inner"></div>
                                            </div>
                                        </div>
                                        <span>8 Weeks</span>
                                        <input type="radio" name="timeframe" value="" checked="checked">
                                    </div>

                                    <div class="planner-radio">
                                        <div class="mock-radio">
                                            <div class="radio-outer">
                                                <div class="radio-inner"></div>
                                            </div>
                                        </div>
                                        <span>12 Weeks</span>
                                        <input type="radio" name="timeframe" value="">
                                    </div>

                                    <div class="planner-radio">
                                        <div class="mock-radio">
                                            <div class="radio-outer">
                                                <div class="radio-inner"></div>
                                            </div>
                                        </div>
                                        <span>18 Weeks</span>
                                        <input type="radio" name="timeframe" value="">
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="radio-group">
                                    <span class="title">My estimated budget is around</span>

                                    <div class="planner-radio">
                                        <div class="mock-radio">
                                            <div class="radio-outer">
                                                <div class="radio-inner"></div>
                                            </div>
                                        </div>
                                        <span>$2,000</span>
                                        <input type="radio" name="budget" value="">
                                    </div>

                                    <div class="planner-radio">
                                        <div class="mock-radio active">
                                            <div class="radio-outer">
                                                <div class="radio-inner"></div>
                                            </div>
                                        </div>
                                        <span>$4,000</span>
                                        <input type="radio" name="budget" value="" checked="checked">
                                    </div>

                                    <div class="planner-radio">
                                        <div class="mock-radio">
                                            <div class="radio-outer">
                                                <div class="radio-inner"></div>
                                            </div>
                                        </div>
                                        <span>$8,000</span>
                                        <input type="radio" name="budget" value="">
                                    </div>

                                    <div class="planner-radio">
                                        <div class="mock-radio">
                                            <div class="radio-outer">
                                                <div class="radio-inner"></div>
                                            </div>
                                        </div>
                                        <span>$10,000</span>
                                        <input type="radio" name="budget" value="">
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <div class="col-sm-12">
                                <input class="input-standard validate-required" type="text" name="name"
                                       placeholder="Your Name">
                                <input class="input-standard validate-required validate-email" type="text" name="email"
                                       placeholder="Email Address">
                                <input class="input-standard" type="text" name="note" placeholder="Note / Relevant URL">
                            </div>

                            <hr>

                            <div class="col-sm-12 text-center">
                                <input type="submit" class="btn" value="Submit Planner">
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </section>
    </section>

    <section id="variant-contact-4" class="vim" vbp="contact" vbr="Contact with Instagram">
        <section class="image-block contact-4">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-7">
                        <div class="text-block">
                            <div class="detail-line"></div>
                            <h5>Contact Us</h5>
                            <h4>Get in touch with us<br> or stop on by to say hey</h4>

                            <p>
                                Whether you’re interested in being a new client,<br> or just a new friend, we’d love to
                                hear from you.<br> Drop in anytime!
                            </p>

                            <p>
                                300 Collins St.<br>
                                Suite 2A<br>
                                Melbourne, 3000
                            </p>

                            <p>
                                P: +6148 3847 382<br>
                                E: hello@machine.net
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="image-holder col-md-6 col-sm-4 pull-right">
                <div class="instafeed" data-user-name="brandswell">
                    <ul></ul>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-contact-5" class="vim" vbp="contact" vbr="Contact with image bg">
        <section class="contact-3 mr-can-parallax">

            <div class="background-image-holder overlay">
                <img alt="Slide Background" class="background-image" src="../img/hero20.jpg">
            </div>

            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 text-center">
                        <div class="text-block">
                            <h1 class="text-white">Get In Touch</h1>

                            <p class="super-lead text-white">
                                Whether you’re interested in being a new client, or just a new friend, we’d love to hear
                                from you. Drop in anytime!
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-4 text-center">
                        <i class="pe-7s-phone text-white"></i>
                        <h5>+614 9583 9281</h5>
                    </div>

                    <div class="col-sm-4 text-center">
                        <i class="pe-7s-map-marker text-white"></i>
                        <h5>300 Collins St.<br> Melbourne, 3000</h5>
                    </div>

                    <div class="col-sm-4 text-center">
                        <i class="pe-7s-mail text-white"></i>
                        <h5>hello@machine.net</h5>
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-12 text-center">
                        <ul class="social-links">
                            <li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
                            <li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
                            <li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
                        </ul>
                        <span>&copy; Copyright 2014 Medium Rare</span>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section id="variant-contact-6" class="vim" vbp="contact, map" vbr="Fullwidth Map">
        <section class="fullwidth-map">
            <div class="map-holder">
                <iframe no-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12602.288430703366!2d145.06757600000003!3d-37.846902!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad64194c1f37ae7%3A0xf0bca9af6fe72470!2s1025+Toorak+Rd%2C+Camberwell+VIC+3124!5e0!3m2!1sen!2sau!4v1416895962130"></iframe>
            </div>
        </section>
    </section>

    <section id="variant-utility-1" class="vim" vbp="utility" vbr="404 Page">
        <section class="error-page fullscreen-element">

            <div class="container vertical-align">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <i class="pe-7s-help2"></i>

                        <h1 class="text-white">404 - Man overboard!</h1>

                        <p class="text-white super-lead">Fear not, help is at hand.</p>
                        <a href="#" class="btn btn-white">Back to safety</a>
                        <a href="#" class="btn btn-white">Report to crew</a>
                    </div>
                </div>
            </div>

        </section>
    </section>

    <section id="variant-contact-7" class="vim" vbp="contact, map" vbr="Fullwidth Styled Map">
        <section class="fullwidth-map">
            <div class="map-canvas" data-address="Melbourne, Victoria, Australia" data-map-zoom="12"></div>
        </section>
    </section>

    <section id="variant-nav-1" class="vev" data-vjt="Standard Bar" vbs="nav" vbr="Main Nav">

        <script class="options" type="application/json">
            {
                "options": [
                    {
                        "type": "toggle",
                        "class": "relative-nav",
                        "text": "Nav before content",
                        "initial": "auto",
                        "icon": "collapse-down"
                    },
                    {
                        "type": "toggle",
                        "class": "nav-light",
                        "text": "Light skin",
                        "initial": "auto",
                        "icon": "brush"
                    }
                ]
            }
        </script>

        <nav class="nav-1">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <a href="#" class="home-link">
                            <img alt="Logo" class="logo" src="../img/logo-square-light.png">
                        </a>
                        <ul class="menu vjd">
                            <li><a href="#" vht="parent">Single</a></li>
                            <li class="has-dropdown"><a href="#" vht="parent">Dropdown</a>
                                <ul class="subnav">
                                    <li><a href="#" vht="parent">Single</a></li>
                                    <li class="has-dropdown-2"><a href="#">Level 2</a>
                                        <ul class="subnav-level-2">
                                            <li><a href="#" vht="parent">Single</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>

                        <div class="nav-functions">

                            <div class="search-bar">
                                <form class="search">
                                    <input type="text" placeholder="" name="search">
                                    <input type="submit" value="">
                                    <i class="pe-7s-search"></i>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mobile-toggle">
                <div class="bar-1"></div>
                <div class="bar-2"></div>
            </div>
        </nav>
    </section>

    <section id="variant-nav-2" class="vev" data-vjt="Reveal Bar" vbs="nav" vbr="Main Nav">

        <script class="options" type="application/json">
            {
                "options": [
                    {
                        "type": "toggle",
                        "class": "relative-nav",
                        "text": "Nav before content",
                        "initial": "auto",
                        "icon": "collapse-down"
                    },
                    {
                        "type": "toggle",
                        "class": "nav-light",
                        "text": "Light skin",
                        "initial": "auto",
                        "icon": "brush"
                    }
                ]
            }
        </script>

        <nav class="nav-2">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <a href="#">
                            <img alt="logo" class="logo" src="../img/logo-square-light.png">
                        </a>

                        <div class="text-right">
                            <ul class="social-links">
                                <li><a href="#"><i class="ti ti-twitter-alt" vht="li"></i></a></li>
                                <li><a href="#"><i class="icon ti ti-vimeo-alt" vht="li"></i></a></li>
                                <li><a href="#"><i class="icon ti ti-dribbble" vht="li"></i></a></li>
                            </ul>
                            <div class="menu-toggle">
                                <div class="bar-1"></div>
                                <div class="bar-2"></div>
                                <div class="bar-3"></div>
                            </div>

                            <ul class="menu">
                                <li><a href="#" vht="parent">Single Link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </section>

    <section id="variant-nav-3" class="vev" data-vjt="Fullscreen Nav" vbs="nav" vbr="Main Nav">

        <script class="options" type="application/json">
            {
                "options": [
                    {
                        "type": "toggle",
                        "class": "relative-nav",
                        "text": "Nav before content",
                        "initial": "auto",
                        "icon": "collapse-down"
                    },
                    {
                        "type": "toggle",
                        "class": "nav-light",
                        "text": "Light skin",
                        "initial": "auto",
                        "icon": "brush"
                    }
                ]
            }
        </script>

        <nav class="nav-3">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <a href="index.html">
                            <img alt="logo" class="logo" src="../img/logo-square-light.png">
                        </a>

                        <div class="menu-toggle">
                            <div class="bar-1"></div>
                            <div class="bar-2"></div>
                            <div class="bar-3"></div>
                        </div>

                        <div class="nav-functions">

                            <div class="search-bar">
                                <form class="search">
                                    <input type="text" placeholder="" name="search">
                                    <input type="submit" value="">
                                    <i class="pe-7s-search"></i>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="fullscreen-container">
                <div class="container vertical-align">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <a href="index.html">
                                <img alt="logo" class="logo" src="../img/logo-square-light.png">
                            </a>
                            <ul class="menu">
                                <li class="has-dropdown">
                                    <a href="#" vht="parent">Dropdown</a>
                                    <ul class="subnav">
                                        <li><a vht="parent" href="#">Single</a></li>
                                    </ul>
                                </li>
                                <li><a href="#" vht="parent">Single</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="bottom-content">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <ul class="social-links">
                                    <li><a href="#"><i class="icon ti ti-twitter-alt" vht="li"></i></a></li>
                                    <li><a href="#"><i class="icon ti ti-vimeo-alt" vht="li"></i></a></li>
                                    <li><a href="#"><i class="icon ti ti-dribbble" vht="li"></i></a></li>
                                </ul>
                                <span>&copy; Copyright 2014 Medium Rare</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </nav>
    </section>
</div>

<div id="vdk" class="vih">

    <section id="variant-footer-1" class="vim" vbs="footer" vbp="misc" vbr="Newsletter">
        <footer class="footer-1">
            <div class="container">
                <div class="row">
                    <div class="col-md-2 col-sm-3">
                        <ul>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Terms + Conditions</a></li>
                            <li><a href="#">Pricing</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </div>

                    <div class="col-md-2 col-sm-3">
                        <ul>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">Dribbble</a></li>
                            <li><a href="#">Behance</a></li>
                        </ul>
                    </div>

                    <div class="col-md-4 col-md-offset-4 col-sm-6">
                        <p>
                            Subscribe to our newsletter to receive news & updates. We promise to not spam you, super
                            promise!
                        </p>

                        <form class="form-newsletter" data-success="Thanks, we'll be in touch shortly."
                              data-error="Please enter a valid email address">
                            <input type="text" class="validate-required validate-email input-standard"
                                   placeholder="Your Email Here">
                            <input type="submit">
                            <i class="icon pe-7s-angle-right text-white"></i>
                            <iframe class="mail-list-form" srcdoc=""></iframe>
                        </form>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="footer-lower">
                            <span>&copy; Copyright 2014 Medium Rare - Made with</span><i
                                class="icon pe-7s-like"></i><span>in Melbourne</span>
                        </div>
                    </div>
                </div>

            </div>
        </footer>
    </section>

    <section id="variant-footer-2" class="vim" vbs="footer" vbp="misc" vbr="Simple Tagline">
        <footer class="footer-2">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <a href="index.html">
                            <img alt="logo" class="logo" src="../img/logo-square-dark.png">
                        </a>
                        <span class="tagline">Machine multi-purpose<br> premium template</span>
                    </div>

                    <div class="col-sm-6 text-right">
                        <ul class="social-links">
                            <li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
                            <li><a href="#"><i class="icon ti ti-facebook"></i></a></li>
                            <li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
                        </ul>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="footer-lower">
                            <a class="text-link" href="#">hello@machine.net <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a>
                            <span class="copyright">&copy; Copyright 2014 Medium Rare</span>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </section>

    <section id="variant-footer-3" class="vim" vbs="footer" vbp="misc" vbr="Logo only">
        <footer class="footer-3">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <a href="#">
                            <img alt="logo" class="logo" src="../img/logo-square-dark.png">
                        </a>
                        <span>&copy; Copyright 2014 Medium Rare</span>
                    </div>
                </div>
            </div>
        </footer>
    </section>

    <section id="variant-footer-4" class="vim" vbs="footer" vbp="misc" vbr="Social Links">
        <footer class="footer-4">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <ul class="social-links">
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">Instagram</a></li>
                            <li><a href="#">Dribbble</a></li>
                        </ul>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 text-center">
                        <a href="#">
                            <img alt="logo" class="logo" src="../img/logo-square-dark.png">
                        </a>
                        <span>&copy; Copyright 2014 Medium Rare</span>
                    </div>
                </div>
            </div>
        </footer>
    </section>

    <section id="variant-footer-5" class="vim" vbs="footer" vbp="misc" vbr="Primary colour">
        <footer class="footer-5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center">
                        <a href="#">
                            <img alt="logo" class="logo" src="../img/logo-square-light.png">
                        </a>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <span class="text-white">&copy; Copyright 2014 Medium Rare, All Rights Reserved</span>
                    </div>

                    <div class="col-sm-6 text-right">
                        <ul>
                            <li><a href="#" class="text-link">@mrareweb <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a></li>
                            <li><a href="#" class="text-link">job openings <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a></li>
                            <li><a href="#" class="text-link">contact us <i
                                    class="icon ti ti-arrow-right arrow_right"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </section>

    <section id="variant-footer-6" class="vim" vbs="footer" vbp="misc" vbr="Twitter feed">
        <footer class="footer-6">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-md-offset-1 col-sm-6">
                        <a href="#">
                            <img class="logo" alt="logo" src="../img/logo-square-light.png">
                        </a>

                        <p>
                            300 Collins St.<br>
                            Suite 2A<br>
                            Melbourne, 3000
                        </p>

                        <p>
                            P: +6148 3847 382<br>
                            E: hello@machine.net
                        </p>
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <h5>Twitter</h5>

                        <div class="twitter-feed">
                            <div class="tweets-feed" data-widget-id="492085717044981760">

                            </div>
                        </div>
                    </div>

                    <div class="col-md-2 col-md-offset-1 col-sm-12">
                        <h5>Navigate</h5>
                        <ul class="link-list">
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Our Work</a></li>
                            <li><a href="#">Journal</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="footer-lower">
                            <span>&copy; Copyright 2014 Medium Rare, All Rights Reserved</span>
                            <ul class="social-links">
                                <li><a href="#"><i class="icon ti ti-twitter-alt"></i></a></li>
                                <li><a href="#"><i class="icon ti ti-vimeo-alt"></i></a></li>
                                <li><a href="#"><i class="icon ti ti-dribbble"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </footer>
    </section>
</div>


<div id="vdt" class="vih">
			<pre>
				<code id="vji" data-name="Original">
                    &lt;!doctype html&gt;
                    &lt;html lang="en"&gt;
                    &lt;head&gt;
                    &lt;meta charset="utf-8"&gt;
                    &lt;title&gt;[title]&lt;/title&gt;
                    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
                    &lt;link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/&gt;
                    &lt;link href=&quot;css/et-line-icons.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
                    media=&quot;all&quot;&gt;
                    &lt;link href=&quot;css/pe-icon-7-stroke.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
                    media=&quot;all&quot;&gt;
                    &lt;link href="css/flexslider.min.css" rel="stylesheet" type="text/css" media="all"/&gt;
                    &lt;link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all"/&gt;
                    &lt;link href="css/theme.css" rel="stylesheet" type="text/css" media="all"/&gt;
                    &lt;link href="css/custom.css" rel="stylesheet" type="text/css" media="all"/&gt;
                    &lt;link
                    href="http://fonts.googleapis.com/css?family=Roboto:100,400,300,700,400italic,500%7CMontserrat:400,700"
                    rel="stylesheet" type="text/css"&gt;
                    &lt;/head&gt;
                    &lt;body [optional-body-classes]&gt;

                </code>
			</pre>
</div>


<div id="vfv" class="vih">
			<pre>
				<code id="vif" name="Original">
                    &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/flexslider.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/lightbox.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/twitterfetcher.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/spectragram.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/smooth-scroll.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/jquery.plugin.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/placeholders.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/countdown.min.js"&gt;&lt;/script&gt;
                    &lt;script src="js/parallax.js"&gt;&lt;/script&gt;
                    &lt;script src="js/scripts.js"&gt;&lt;/script&gt;
                    &lt;/body&gt;
                    &lt;/html&gt;

                </code>
			</pre>
</div>

<div id="vbn" class="vih"></div>

<div id="vbl" class="vih"></div>

<ul id="vhl" class="vih"></ul>

<div id="vdp" class="vih"></div>

<script class="vaz" type="application/json">
    {
        "original": {
            "name": "Machine",
            "pathToOriginal": "mixture/public/css/less/",
            "originalFileName": "theme",
            "colours": [
                "#0054a6"
            ]
        },
        "schemes": [
            {
                "name": "Emerald",
                "colours": [
                    "#33C68A"
                ]
            },
            {
                "name": "Gemstone",
                "colours": [
                    "#3eb8a0"
                ]
            },
            {
                "name": "Silica",
                "colours": [
                    "#3eabb8"
                ]
            },
            {
                "name": "Wonka",
                "colours": [
                    "#394c91"
                ]
            },
            {
                "name": "Sherbert",
                "colours": [
                    "#e4734b"
                ]
            },
            {
                "name": "Ketchup",
                "colours": [
                    "#e74c3c"
                ]
            },
            {
                "name": "Shiraz",
                "colours": [
                    "#B54E4F"
                ]
            },
            {
                "name": "Mustard",
                "colours": [
                    "#E3AA49"
                ]
            },
            {
                "name": "Sandstone",
                "colours": [
                    "#a79169"
                ]
            },
            {
                "name": "Gunmetal",
                "colours": [
                    "#4d595f"
                ]
            },
            {
                "name": "Charcoal",
                "colours": [
                    "#333333"
                ]
            }
        ]
    }
</script>

<script class="vmq" type="application/json">
    {
        "title": "Typography",
        "originalSet": {
            "setName": "Roboto",
            "fonts": [
                {
                    "fontName": "Roboto"
                }
            ],
            "css": [
            ]
        },
        "optionalSets": [
            {
                "setName": "OpenSans",
                "fonts": [
                    {
                        "fontName": "OpenSans"
                    }
                ],
                "css": [
                    "http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700"
                ]
            },
            {
                "setName": "Lato",
                "fonts": [
                    {
                        "fontName": "Lato"
                    }
                ],
                "css": [
                    "http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic"
                ]
            },
            {
                "setName": "Titillium",
                "fonts": [
                    {
                        "fontName": "Titillium"
                    }
                ],
                "css": [
                    "http://fonts.googleapis.com/css?family=Titillium+Web:300,300italic"
                ]
            },
            {
                "setName": "Helvetica",
                "fonts": [
                    {
                        "fontName": "Helvetica"
                    }
                ],
                "css": [
                    "http://fonts.googleapis.com/css?family=Arimo:400,700,400italic"
                ]
            },
            {
                "setName": "Cardo",
                "fonts": [
                    {
                        "fontName": "Cardo"
                    }
                ],
                "css": [
                    "http://fonts.googleapis.com/css?family=Cardo:400,400italic"
                ]
            },
            {
                "setName": "Libre",
                "fonts": [
                    {
                        "fontName": "Libre"
                    }
                ],
                "css": [
                    "http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic"
                ]
            }
        ]
    }

</script>

<script id="vkk" type="application/json">
    {
        "options": [
            {
                "type": "toggle",
                "class": "boxed",
                "text": "Boxed Layout",
                "initial": "off",
                "icon": "resize-width"
            }
        ]
    }
</script>

<script id="variant-element-classes-mrv" type="application/json">
    {
        "options": [
            {
                "type": "toggle",
                "selector": "section",
                "menu": "utility",
                "submenu": "Section Controls",
                "class": "hidden-xs",
                "text": "Hide On Mobile",
                "initial": "auto",
                "icon": "phone"
            },
            {
                "type": "toggle",
                "selector": ".image-bg, .cover, section.image-slider, section.parallax, .hero-slider, .image-block .image-holder, section.text-divider .overlay, .timeline-1",
                "menu": "utility",
                "class": "parallax",
                "text": "Parallax",
                "initial": "auto",
                "icon": "data-transfer-upload"
            },
            {
                "type": "toggle",
                "disposableSelector": ".mr-can-parallax",
                "menu": "utility",
                "class": "parallax",
                "text": "Parallax",
                "initial": "auto",
                "icon": "data-transfer-upload"
            },
            {
                "type": "toggle",
                "selector": ".image-bg, .cover, section.image-slider",
                "menu": "utility",
                "class": "parallax",
                "text": "Parallax",
                "initial": "auto",
                "icon": "data-transfer-upload"
            },
            {
                "type": "toggle",
                "selector": ".row, div[class*='col-']",
                "menu": "context",
                "class": "text-center",
                "text": "Text Center",
                "initial": "auto",
                "icon": "align-center"
            }
        ]
    }
</script>

<script id="vnd" type="application/json">
    {
        "options": [
            {
                "buttonText": "Edit Video Embed",
                "modalTitle": "Edit Video Embed",
                "modalIntro": "Get the embed code from your preferred video provider and paste here.",
                "modalInputLabel": "Video Embed Code:",
                "selector": ".iframe-holder > iframe",
                "attribute": "no-src",
                "modalInputIcon": "video",
                "sectionControl": "true"
            },
            {
                "buttonText": "Edit Video Embed",
                "modalTitle": "Edit Video Embed",
                "modalIntro": "Get the embed code from your preferred video provider and paste here.",
                "modalInputLabel": "Video Embed Code:",
                "selector": ".embed-holder > iframe",
                "attribute": "no-src",
                "modalInputIcon": "video",
                "sectionControl": "true"
            },
            {
                "buttonText": "Edit Placeholder",
                "modalTitle": "Edit Placeholder",
                "modalIntro": "Edit the placeholder text for this input. Placeholder text appears before the user has started typing.",
                "modalInputLabel": "Placeholder Text:",
                "selector": "input[type='text']",
                "attribute": "placeholder",
                "modalInputIcon": "text"
            },
            {
                "buttonText": "Edit Value",
                "modalTitle": "Edit Input Value",
                "modalIntro": "Edit the value for this input. The value is the text that appears on the submit button.",
                "modalInputLabel": "Button Text:",
                "selector": "input[type='submit']",
                "attribute": "value",
                "modalInputIcon": "text"
            },
            {
                "buttonText": "Edit Newsletter Embed",
                "modalTitle": "Edit Newsletter Embed",
                "modalIntro": "Copy the form code from Mailchimp or Campaign Monitor here.  Use the `Classic` form in Mailchimp. Use the standard form in Campaign Monitor.  Leaving this empty will default to email form behaviour (sent through mail.php)",
                "modalInputLabel": "Form Embed Code:",
                "selector": "form.form-newsletter iframe.mail-list-form",
                "attribute": "srcdoc",
                "modalInputIcon": "envelope-closed",
                "sectionControl": "true"
            },
            {
                "buttonText": "Edit Form Success Message",
                "modalTitle": "Edit Form Success Message",
                "modalIntro": "Provide a message to appear when the form is submitted successfully.",
                "modalInputLabel": "Form Success Message:",
                "selector": "form[data-success]",
                "attribute": "data-success",
                "modalInputIcon": "circle-check",
                "sectionControl": "true"
            },
            {
                "buttonText": "Edit Form Error Message",
                "modalTitle": "Edit Form Error Message",
                "modalIntro": "Provide a message to appear when the form validation is rejected.",
                "modalInputLabel": "Form Error Message:",
                "selector": "form[data-error]",
                "attribute": "data-error",
                "modalInputIcon": "circle-x",
                "sectionControl": "true"
            },
            {
                "buttonText": "Edit Form Redirect Address",
                "modalTitle": "Edit Form Redirect Address",
                "modalIntro": "The address to redirect after successful form submission.   Leave blank for no redirection.",
                "modalInputLabel": "Redirect Address:",
                "selector": "form.form-email, form.form-newsletter",
                "attribute": "success-redirect",
                "modalInputIcon": "external-link",
                "sectionControl": "true"
            },
            {
                "buttonText": "Edit Feed",
                "modalTitle": "Edit Instagram Feed",
                "modalIntro": "Edit the Instagram feed by placing your desired username here.",
                "modalInputLabel": "Username:",
                "selector": ".instafeed",
                "attribute": "data-user-name",
                "modalInputIcon": "instagram",
                "sectionControl": "true",
                "refresh": "true"
            },
            {
                "buttonText": "Edit Feed",
                "modalTitle": "Edit Twitter Feed",
                "modalIntro": "Create a widget from your Twitter dashboard and paste the Widget ID here. For a more detailed example of how to obtain a widget ID, please see the template documentation.",
                "modalInputLabel": "Widget ID:",
                "selector": ".tweets-feed",
                "attribute": "data-widget-id",
                "modalInputIcon": "twitter",
                "sectionControl": "true",
                "refresh": "true"
            },
            {
                "buttonText": "Edit Map Embed",
                "modalTitle": "Edit Map Embed",
                "modalIntro": "Copy the iframe embed code from your mapping provider and paste it here.",
                "modalInputLabel": "Embed Code:",
                "selector": ".map-holder > iframe",
                "attribute": "no-src",
                "modalInputIcon": "map-marker",
                "sectionControl": "true"
            },
            {
                "buttonText": "Edit Google Maps API Key",
                "modalTitle": "Google Maps API Key",
                "modalIntro": "Get your Maps API key from Google and paste it here to allow styled maps in your page.",
                "modalInputLabel": "API Key:",
                "selector": "div.map-canvas",
                "attribute": "data-maps-api-key",
                "modalInputIcon": "key",
                "sectionControl": "true",
                "refresh": "true"
            },
            {
                "buttonText": "Edit Map Address",
                "modalTitle": "Map Address",
                "modalIntro": "Provide a specific address for Google Maps to center the map.",
                "modalInputLabel": "Full Address:",
                "selector": "div.map-canvas",
                "attribute": "data-address",
                "modalInputIcon": "map-marker",
                "sectionControl": "true",
                "refresh": "true"
            },
            {
                "buttonText": "Edit Map Style",
                "modalTitle": "Map Style",
                "modalIntro": "Copy JSON style code from https://snazzymaps.com/ or http://goo.gl/GJEDaO and paste below.",
                "modalInputLabel": "Maps Style JSON:",
                "selector": "div.map-canvas",
                "attribute": "data-map-style",
                "modalInputIcon": "brush",
                "sectionControl": "true",
                "refresh": "true"
            },
            {
                "buttonText": "Edit Map Zoom Level",
                "modalTitle": "Map Zoom Level",
                "modalIntro": "Provide a zoom level (number) between 1 and 18 where 18 is closer and 1 is further away.",
                "modalInputLabel": "Zoom level:",
                "selector": "div.map-canvas",
                "attribute": "data-map-zoom",
                "modalInputIcon": "zoom-in",
                "sectionControl": "true",
                "refresh": "true"
            },
            {
                "buttonText": "Edit Countdown Date",
                "modalTitle": "Edit Countdown Date",
                "modalIntro": "Date of countdown in YYYY/DD/MM format.",
                "modalInputLabel": "Date:",
                "selector": ".countdown",
                "attribute": "data-date",
                "modalInputIcon": "clock",
                "sectionControl": "true",
                "refresh": "true"
            },
            {
                "buttonText": "Edit Project Tags",
                "modalTitle": "Edit Project Tags",
                "modalIntro": "Tag your poject here.  Use comma separated words to make tags like so: web,branding,seo,development",
                "modalInputLabel": "Project Tags:",
                "selector": ".project",
                "attribute": "data-filter",
                "modalInputIcon": "tags",
                "refresh": "true"
            }
        ]
    }
</script>

<script id="voi" type="application/json">
    {
        "iconPacks": [
            {
                "name": "Themify",
                "url": "http://goo.gl/I70F4d",
                "headString": "&lt;link href=&quot;css/themify-icons.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; /&gt;",
                "iconPrefix": "ti-",
                "iconClass": "ti",
                "icons": [
                    "ti-wand",
                    "ti-volume",
                    "ti-user",
                    "ti-unlock",
                    "ti-unlink",
                    "ti-trash",
                    "ti-thought",
                    "ti-target",
                    "ti-tag",
                    "ti-tablet",
                    "ti-star",
                    "ti-spray",
                    "ti-signal",
                    "ti-shopping-cart",
                    "ti-shopping-cart-full",
                    "ti-settings",
                    "ti-search",
                    "ti-zoom-in",
                    "ti-zoom-out",
                    "ti-cut",
                    "ti-ruler",
                    "ti-ruler-pencil",
                    "ti-ruler-alt",
                    "ti-bookmark",
                    "ti-bookmark-alt",
                    "ti-reload",
                    "ti-plus",
                    "ti-pin",
                    "ti-pencil",
                    "ti-pencil-alt",
                    "ti-paint-roller",
                    "ti-paint-bucket",
                    "ti-na",
                    "ti-mobile",
                    "ti-minus",
                    "ti-medall",
                    "ti-medall-alt",
                    "ti-marker",
                    "ti-marker-alt",
                    "ti-arrow-up",
                    "ti-arrow-right",
                    "ti-arrow-left",
                    "ti-arrow-down",
                    "ti-lock",
                    "ti-location-arrow",
                    "ti-link",
                    "ti-layout",
                    "ti-layers",
                    "ti-layers-alt",
                    "ti-key",
                    "ti-import",
                    "ti-image",
                    "ti-heart",
                    "ti-heart-broken",
                    "ti-hand-stop",
                    "ti-hand-open",
                    "ti-hand-drag",
                    "ti-folder",
                    "ti-flag",
                    "ti-flag-alt",
                    "ti-flag-alt-2",
                    "ti-eye",
                    "ti-export",
                    "ti-exchange-vertical",
                    "ti-desktop",
                    "ti-cup",
                    "ti-crown",
                    "ti-comments",
                    "ti-comment",
                    "ti-comment-alt",
                    "ti-close",
                    "ti-clip",
                    "ti-angle-up",
                    "ti-angle-right",
                    "ti-angle-left",
                    "ti-angle-down",
                    "ti-check",
                    "ti-check-box",
                    "ti-camera",
                    "ti-announcement",
                    "ti-brush",
                    "ti-briefcase",
                    "ti-bolt",
                    "ti-bolt-alt",
                    "ti-blackboard",
                    "ti-bag",
                    "ti-move",
                    "ti-arrows-vertical",
                    "ti-arrows-horizontal",
                    "ti-fullscreen",
                    "ti-arrow-top-right",
                    "ti-arrow-top-left",
                    "ti-arrow-circle-up",
                    "ti-arrow-circle-right",
                    "ti-arrow-circle-left",
                    "ti-arrow-circle-down",
                    "ti-angle-double-up",
                    "ti-angle-double-right",
                    "ti-angle-double-left",
                    "ti-angle-double-down",
                    "ti-zip",
                    "ti-world",
                    "ti-wheelchair",
                    "ti-view-list",
                    "ti-view-list-alt",
                    "ti-view-grid",
                    "ti-uppercase",
                    "ti-upload",
                    "ti-underline",
                    "ti-truck",
                    "ti-timer",
                    "ti-ticket",
                    "ti-thumb-up",
                    "ti-thumb-down",
                    "ti-text",
                    "ti-stats-up",
                    "ti-stats-down",
                    "ti-split-v",
                    "ti-split-h",
                    "ti-smallcap",
                    "ti-shine",
                    "ti-shift-right",
                    "ti-shift-left",
                    "ti-shield",
                    "ti-notepad",
                    "ti-server",
                    "ti-quote-right",
                    "ti-quote-left",
                    "ti-pulse",
                    "ti-printer",
                    "ti-power-off",
                    "ti-plug",
                    "ti-pie-chart",
                    "ti-paragraph",
                    "ti-panel",
                    "ti-package",
                    "ti-music",
                    "ti-music-alt",
                    "ti-mouse",
                    "ti-mouse-alt",
                    "ti-money",
                    "ti-microphone",
                    "ti-menu",
                    "ti-menu-alt",
                    "ti-map",
                    "ti-map-alt",
                    "ti-loop",
                    "ti-location-pin",
                    "ti-list",
                    "ti-light-bulb",
                    "ti-Italic",
                    "ti-info",
                    "ti-infinite",
                    "ti-id-badge",
                    "ti-hummer",
                    "ti-home",
                    "ti-help",
                    "ti-headphone",
                    "ti-harddrives",
                    "ti-harddrive",
                    "ti-gift",
                    "ti-game",
                    "ti-filter",
                    "ti-files",
                    "ti-file",
                    "ti-eraser",
                    "ti-envelope",
                    "ti-download",
                    "ti-direction",
                    "ti-direction-alt",
                    "ti-dashboard",
                    "ti-control-stop",
                    "ti-control-shuffle",
                    "ti-control-play",
                    "ti-control-pause",
                    "ti-control-forward",
                    "ti-control-backward",
                    "ti-cloud",
                    "ti-cloud-up",
                    "ti-cloud-down",
                    "ti-clipboard",
                    "ti-car",
                    "ti-calendar",
                    "ti-book",
                    "ti-bell",
                    "ti-basketball",
                    "ti-bar-chart",
                    "ti-bar-chart-alt",
                    "ti-back-right",
                    "ti-back-left",
                    "ti-arrows-corner",
                    "ti-archive",
                    "ti-anchor",
                    "ti-align-right",
                    "ti-align-left",
                    "ti-align-justify",
                    "ti-align-center",
                    "ti-alert",
                    "ti-alarm-clock",
                    "ti-agenda",
                    "ti-write",
                    "ti-window",
                    "ti-widgetized",
                    "ti-widget",
                    "ti-widget-alt",
                    "ti-wallet",
                    "ti-video-clapper",
                    "ti-video-camera",
                    "ti-vector",
                    "ti-themify-logo",
                    "ti-themify-favicon",
                    "ti-themify-favicon-alt",
                    "ti-support",
                    "ti-stamp",
                    "ti-split-v-alt",
                    "ti-slice",
                    "ti-shortcode",
                    "ti-shift-right-alt",
                    "ti-shift-left-alt",
                    "ti-ruler-alt-2",
                    "ti-receipt",
                    "ti-pin2",
                    "ti-pin-alt",
                    "ti-pencil-alt2",
                    "ti-palette",
                    "ti-more",
                    "ti-more-alt",
                    "ti-microphone-alt",
                    "ti-magnet",
                    "ti-line-double",
                    "ti-line-dotted",
                    "ti-line-dashed",
                    "ti-layout-width-full",
                    "ti-layout-width-default",
                    "ti-layout-width-default-alt",
                    "ti-layout-tab",
                    "ti-layout-tab-window",
                    "ti-layout-tab-v",
                    "ti-layout-tab-min",
                    "ti-layout-slider",
                    "ti-layout-slider-alt",
                    "ti-layout-sidebar-right",
                    "ti-layout-sidebar-none",
                    "ti-layout-sidebar-left",
                    "ti-layout-placeholder",
                    "ti-layout-menu",
                    "ti-layout-menu-v",
                    "ti-layout-menu-separated",
                    "ti-layout-menu-full",
                    "ti-layout-media-right-alt",
                    "ti-layout-media-right",
                    "ti-layout-media-overlay",
                    "ti-layout-media-overlay-alt",
                    "ti-layout-media-overlay-alt-2",
                    "ti-layout-media-left-alt",
                    "ti-layout-media-left",
                    "ti-layout-media-center-alt",
                    "ti-layout-media-center",
                    "ti-layout-list-thumb",
                    "ti-layout-list-thumb-alt",
                    "ti-layout-list-post",
                    "ti-layout-list-large-image",
                    "ti-layout-line-solid",
                    "ti-layout-grid4",
                    "ti-layout-grid3",
                    "ti-layout-grid2",
                    "ti-layout-grid2-thumb",
                    "ti-layout-cta-right",
                    "ti-layout-cta-left",
                    "ti-layout-cta-center",
                    "ti-layout-cta-btn-right",
                    "ti-layout-cta-btn-left",
                    "ti-layout-column4",
                    "ti-layout-column3",
                    "ti-layout-column2",
                    "ti-layout-accordion-separated",
                    "ti-layout-accordion-merged",
                    "ti-layout-accordion-list",
                    "ti-ink-pen",
                    "ti-info-alt",
                    "ti-help-alt",
                    "ti-headphone-alt",
                    "ti-hand-point-up",
                    "ti-hand-point-right",
                    "ti-hand-point-left",
                    "ti-hand-point-down",
                    "ti-gallery",
                    "ti-face-smile",
                    "ti-face-sad",
                    "ti-credit-card",
                    "ti-control-skip-forward",
                    "ti-control-skip-backward",
                    "ti-control-record",
                    "ti-control-eject",
                    "ti-comments-smiley",
                    "ti-brush-alt",
                    "ti-youtube",
                    "ti-vimeo",
                    "ti-twitter",
                    "ti-time",
                    "ti-tumblr",
                    "ti-skype",
                    "ti-share",
                    "ti-share-alt",
                    "ti-rocket",
                    "ti-pinterest",
                    "ti-new-window",
                    "ti-microsoft",
                    "ti-list-ol",
                    "ti-linkedin",
                    "ti-layout-sidebar-2",
                    "ti-layout-grid4-alt",
                    "ti-layout-grid3-alt",
                    "ti-layout-grid2-alt",
                    "ti-layout-column4-alt",
                    "ti-layout-column3-alt",
                    "ti-layout-column2-alt",
                    "ti-instagram",
                    "ti-google",
                    "ti-github",
                    "ti-flickr",
                    "ti-facebook",
                    "ti-dropbox",
                    "ti-dribbble",
                    "ti-apple",
                    "ti-android",
                    "ti-save",
                    "ti-save-alt",
                    "ti-yahoo",
                    "ti-wordpress",
                    "ti-vimeo-alt",
                    "ti-twitter-alt",
                    "ti-tumblr-alt",
                    "ti-trello",
                    "ti-stack-overflow",
                    "ti-soundcloud",
                    "ti-sharethis",
                    "ti-sharethis-alt",
                    "ti-reddit",
                    "ti-pinterest-alt",
                    "ti-microsoft-alt",
                    "ti-linux",
                    "ti-jsfiddle",
                    "ti-joomla",
                    "ti-html5",
                    "ti-flickr-alt",
                    "ti-email",
                    "ti-drupal",
                    "ti-dropbox-alt",
                    "ti-css3",
                    "ti-rss",
                    "ti-rss-alt"
                ],
                "KBsize": "250"
            },
            {
                "name": "Font Awesome",
                "url": "http://goo.gl/oFgIWn",
                "headString": "&lt;link href=&quot;css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;",
                "iconPrefix": "fa-",
                "iconClass": "fa",
                "icons": [
                    "fa-glass",
                    "fa-music",
                    "fa-search",
                    "fa-envelope-o",
                    "fa-heart",
                    "fa-star",
                    "fa-star-o",
                    "fa-user",
                    "fa-film",
                    "fa-th-large",
                    "fa-th",
                    "fa-th-list",
                    "fa-check",
                    "fa-remove",
                    "fa-close",
                    "fa-times",
                    "fa-search-plus",
                    "fa-search-minus",
                    "fa-power-off",
                    "fa-signal",
                    "fa-gear",
                    "fa-cog",
                    "fa-trash-o",
                    "fa-home",
                    "fa-file-o",
                    "fa-clock-o",
                    "fa-road",
                    "fa-download",
                    "fa-arrow-circle-o-down",
                    "fa-arrow-circle-o-up",
                    "fa-inbox",
                    "fa-play-circle-o",
                    "fa-rotate-right",
                    "fa-repeat",
                    "fa-refresh",
                    "fa-list-alt",
                    "fa-lock",
                    "fa-flag",
                    "fa-headphones",
                    "fa-volume-off",
                    "fa-volume-down",
                    "fa-volume-up",
                    "fa-qrcode",
                    "fa-barcode",
                    "fa-tag",
                    "fa-tags",
                    "fa-book",
                    "fa-bookmark",
                    "fa-print",
                    "fa-camera",
                    "fa-font",
                    "fa-bold",
                    "fa-italic",
                    "fa-text-height",
                    "fa-text-width",
                    "fa-align-left",
                    "fa-align-center",
                    "fa-align-right",
                    "fa-align-justify",
                    "fa-list",
                    "fa-dedent",
                    "fa-outdent",
                    "fa-indent",
                    "fa-video-camera",
                    "fa-photo",
                    "fa-image",
                    "fa-picture-o",
                    "fa-pencil",
                    "fa-map-marker",
                    "fa-adjust",
                    "fa-tint",
                    "fa-edit",
                    "fa-pencil-square-o",
                    "fa-share-square-o",
                    "fa-check-square-o",
                    "fa-arrows",
                    "fa-step-backward",
                    "fa-fast-backward",
                    "fa-backward",
                    "fa-play",
                    "fa-pause",
                    "fa-stop",
                    "fa-forward",
                    "fa-fast-forward",
                    "fa-step-forward",
                    "fa-eject",
                    "fa-chevron-left",
                    "fa-chevron-right",
                    "fa-plus-circle",
                    "fa-minus-circle",
                    "fa-times-circle",
                    "fa-check-circle",
                    "fa-question-circle",
                    "fa-info-circle",
                    "fa-crosshairs",
                    "fa-times-circle-o",
                    "fa-check-circle-o",
                    "fa-ban",
                    "fa-arrow-left",
                    "fa-arrow-right",
                    "fa-arrow-up",
                    "fa-arrow-down",
                    "fa-mail-forward",
                    "fa-share",
                    "fa-expand",
                    "fa-compress",
                    "fa-plus",
                    "fa-minus",
                    "fa-asterisk",
                    "fa-exclamation-circle",
                    "fa-gift",
                    "fa-leaf",
                    "fa-fire",
                    "fa-eye",
                    "fa-eye-slash",
                    "fa-warning",
                    "fa-exclamation-triangle",
                    "fa-plane",
                    "fa-calendar",
                    "fa-random",
                    "fa-comment",
                    "fa-magnet",
                    "fa-chevron-up",
                    "fa-chevron-down",
                    "fa-retweet",
                    "fa-shopping-cart",
                    "fa-folder",
                    "fa-folder-open",
                    "fa-arrows-v",
                    "fa-arrows-h",
                    "fa-bar-chart-o",
                    "fa-bar-chart",
                    "fa-twitter-square",
                    "fa-facebook-square",
                    "fa-camera-retro",
                    "fa-key",
                    "fa-gears",
                    "fa-cogs",
                    "fa-comments",
                    "fa-thumbs-o-up",
                    "fa-thumbs-o-down",
                    "fa-star-half",
                    "fa-heart-o",
                    "fa-sign-out",
                    "fa-linkedin-square",
                    "fa-thumb-tack",
                    "fa-external-link",
                    "fa-sign-in",
                    "fa-trophy",
                    "fa-github-square",
                    "fa-upload",
                    "fa-lemon-o",
                    "fa-phone",
                    "fa-square-o",
                    "fa-bookmark-o",
                    "fa-phone-square",
                    "fa-twitter",
                    "fa-facebook-f",
                    "fa-facebook",
                    "fa-github",
                    "fa-unlock",
                    "fa-credit-card",
                    "fa-rss",
                    "fa-hdd-o",
                    "fa-bullhorn",
                    "fa-bell",
                    "fa-certificate",
                    "fa-hand-o-right",
                    "fa-hand-o-left",
                    "fa-hand-o-up",
                    "fa-hand-o-down",
                    "fa-arrow-circle-left",
                    "fa-arrow-circle-right",
                    "fa-arrow-circle-up",
                    "fa-arrow-circle-down",
                    "fa-globe",
                    "fa-wrench",
                    "fa-tasks",
                    "fa-filter",
                    "fa-briefcase",
                    "fa-arrows-alt",
                    "fa-group",
                    "fa-users",
                    "fa-chain",
                    "fa-link",
                    "fa-cloud",
                    "fa-flask",
                    "fa-cut",
                    "fa-scissors",
                    "fa-copy",
                    "fa-files-o",
                    "fa-paperclip",
                    "fa-save",
                    "fa-floppy-o",
                    "fa-square",
                    "fa-navicon",
                    "fa-reorder",
                    "fa-bars",
                    "fa-list-ul",
                    "fa-list-ol",
                    "fa-strikethrough",
                    "fa-underline",
                    "fa-table",
                    "fa-magic",
                    "fa-truck",
                    "fa-pinterest",
                    "fa-pinterest-square",
                    "fa-google-plus-square",
                    "fa-google-plus",
                    "fa-money",
                    "fa-caret-down",
                    "fa-caret-up",
                    "fa-caret-left",
                    "fa-caret-right",
                    "fa-columns",
                    "fa-unsorted",
                    "fa-sort",
                    "fa-sort-down",
                    "fa-sort-desc",
                    "fa-sort-up",
                    "fa-sort-asc",
                    "fa-envelope",
                    "fa-linkedin",
                    "fa-rotate-left",
                    "fa-undo",
                    "fa-legal",
                    "fa-gavel",
                    "fa-dashboard",
                    "fa-tachometer",
                    "fa-comment-o",
                    "fa-comments-o",
                    "fa-flash",
                    "fa-bolt",
                    "fa-sitemap",
                    "fa-umbrella",
                    "fa-paste",
                    "fa-clipboard",
                    "fa-lightbulb-o",
                    "fa-exchange",
                    "fa-cloud-download",
                    "fa-cloud-upload",
                    "fa-user-md",
                    "fa-stethoscope",
                    "fa-suitcase",
                    "fa-bell-o",
                    "fa-coffee",
                    "fa-cutlery",
                    "fa-file-text-o",
                    "fa-building-o",
                    "fa-hospital-o",
                    "fa-ambulance",
                    "fa-medkit",
                    "fa-fighter-jet",
                    "fa-beer",
                    "fa-h-square",
                    "fa-plus-square",
                    "fa-angle-double-left",
                    "fa-angle-double-right",
                    "fa-angle-double-up",
                    "fa-angle-double-down",
                    "fa-angle-left",
                    "fa-angle-right",
                    "fa-angle-up",
                    "fa-angle-down",
                    "fa-desktop",
                    "fa-laptop",
                    "fa-tablet",
                    "fa-mobile-phone",
                    "fa-mobile",
                    "fa-circle-o",
                    "fa-quote-left",
                    "fa-quote-right",
                    "fa-spinner",
                    "fa-circle",
                    "fa-mail-reply",
                    "fa-reply",
                    "fa-github-alt",
                    "fa-folder-o",
                    "fa-folder-open-o",
                    "fa-smile-o",
                    "fa-frown-o",
                    "fa-meh-o",
                    "fa-gamepad",
                    "fa-keyboard-o",
                    "fa-flag-o",
                    "fa-flag-checkered",
                    "fa-terminal",
                    "fa-code",
                    "fa-mail-reply-all",
                    "fa-reply-all",
                    "fa-star-half-empty",
                    "fa-star-half-full",
                    "fa-star-half-o",
                    "fa-location-arrow",
                    "fa-crop",
                    "fa-code-fork",
                    "fa-unlink",
                    "fa-chain-broken",
                    "fa-question",
                    "fa-info",
                    "fa-exclamation",
                    "fa-superscript",
                    "fa-subscript",
                    "fa-eraser",
                    "fa-puzzle-piece",
                    "fa-microphone",
                    "fa-microphone-slash",
                    "fa-shield",
                    "fa-calendar-o",
                    "fa-fire-extinguisher",
                    "fa-rocket",
                    "fa-maxcdn",
                    "fa-chevron-circle-left",
                    "fa-chevron-circle-right",
                    "fa-chevron-circle-up",
                    "fa-chevron-circle-down",
                    "fa-html5",
                    "fa-css3",
                    "fa-anchor",
                    "fa-unlock-alt",
                    "fa-bullseye",
                    "fa-ellipsis-h",
                    "fa-ellipsis-v",
                    "fa-rss-square",
                    "fa-play-circle",
                    "fa-ticket",
                    "fa-minus-square",
                    "fa-minus-square-o",
                    "fa-level-up",
                    "fa-level-down",
                    "fa-check-square",
                    "fa-pencil-square",
                    "fa-external-link-square",
                    "fa-share-square",
                    "fa-compass",
                    "fa-toggle-down",
                    "fa-caret-square-o-down",
                    "fa-toggle-up",
                    "fa-caret-square-o-up",
                    "fa-toggle-right",
                    "fa-caret-square-o-right",
                    "fa-euro",
                    "fa-eur",
                    "fa-gbp",
                    "fa-dollar",
                    "fa-usd",
                    "fa-rupee",
                    "fa-inr",
                    "fa-cny",
                    "fa-rmb",
                    "fa-yen",
                    "fa-jpy",
                    "fa-ruble",
                    "fa-rouble",
                    "fa-rub",
                    "fa-won",
                    "fa-krw",
                    "fa-bitcoin",
                    "fa-btc",
                    "fa-file",
                    "fa-file-text",
                    "fa-sort-alpha-asc",
                    "fa-sort-alpha-desc",
                    "fa-sort-amount-asc",
                    "fa-sort-amount-desc",
                    "fa-sort-numeric-asc",
                    "fa-sort-numeric-desc",
                    "fa-thumbs-up",
                    "fa-thumbs-down",
                    "fa-youtube-square",
                    "fa-youtube",
                    "fa-xing",
                    "fa-xing-square",
                    "fa-youtube-play",
                    "fa-dropbox",
                    "fa-stack-overflow",
                    "fa-instagram",
                    "fa-flickr",
                    "fa-adn",
                    "fa-bitbucket",
                    "fa-bitbucket-square",
                    "fa-tumblr",
                    "fa-tumblr-square",
                    "fa-long-arrow-down",
                    "fa-long-arrow-up",
                    "fa-long-arrow-left",
                    "fa-long-arrow-right",
                    "fa-apple",
                    "fa-windows",
                    "fa-android",
                    "fa-linux",
                    "fa-dribbble",
                    "fa-skype",
                    "fa-foursquare",
                    "fa-trello",
                    "fa-female",
                    "fa-male",
                    "fa-gittip",
                    "fa-gratipay",
                    "fa-sun-o",
                    "fa-moon-o",
                    "fa-archive",
                    "fa-bug",
                    "fa-vk",
                    "fa-weibo",
                    "fa-renren",
                    "fa-pagelines",
                    "fa-stack-exchange",
                    "fa-arrow-circle-o-right",
                    "fa-arrow-circle-o-left",
                    "fa-toggle-left",
                    "fa-caret-square-o-left",
                    "fa-dot-circle-o",
                    "fa-wheelchair",
                    "fa-vimeo-square",
                    "fa-turkish-lira",
                    "fa-try",
                    "fa-plus-square-o",
                    "fa-space-shuttle",
                    "fa-slack",
                    "fa-envelope-square",
                    "fa-wordpress",
                    "fa-openid",
                    "fa-institution",
                    "fa-bank",
                    "fa-university",
                    "fa-mortar-board",
                    "fa-graduation-cap",
                    "fa-yahoo",
                    "fa-google",
                    "fa-reddit",
                    "fa-reddit-square",
                    "fa-stumbleupon-circle",
                    "fa-stumbleupon",
                    "fa-delicious",
                    "fa-digg",
                    "fa-pied-piper",
                    "fa-pied-piper-alt",
                    "fa-drupal",
                    "fa-joomla",
                    "fa-language",
                    "fa-fax",
                    "fa-building",
                    "fa-child",
                    "fa-paw",
                    "fa-spoon",
                    "fa-cube",
                    "fa-cubes",
                    "fa-behance",
                    "fa-behance-square",
                    "fa-steam",
                    "fa-steam-square",
                    "fa-recycle",
                    "fa-automobile",
                    "fa-car",
                    "fa-cab",
                    "fa-taxi",
                    "fa-tree",
                    "fa-spotify",
                    "fa-deviantart",
                    "fa-soundcloud",
                    "fa-database",
                    "fa-file-pdf-o",
                    "fa-file-word-o",
                    "fa-file-excel-o",
                    "fa-file-powerpoint-o",
                    "fa-file-photo-o",
                    "fa-file-picture-o",
                    "fa-file-image-o",
                    "fa-file-zip-o",
                    "fa-file-archive-o",
                    "fa-file-sound-o",
                    "fa-file-audio-o",
                    "fa-file-movie-o",
                    "fa-file-video-o",
                    "fa-file-code-o",
                    "fa-vine",
                    "fa-codepen",
                    "fa-jsfiddle",
                    "fa-life-bouy",
                    "fa-life-buoy",
                    "fa-life-saver",
                    "fa-support",
                    "fa-life-ring",
                    "fa-circle-o-notch",
                    "fa-ra",
                    "fa-rebel",
                    "fa-ge",
                    "fa-empire",
                    "fa-git-square",
                    "fa-git",
                    "fa-hacker-news",
                    "fa-tencent-weibo",
                    "fa-qq",
                    "fa-wechat",
                    "fa-weixin",
                    "fa-send",
                    "fa-paper-plane",
                    "fa-send-o",
                    "fa-paper-plane-o",
                    "fa-history",
                    "fa-genderless",
                    "fa-circle-thin",
                    "fa-header",
                    "fa-paragraph",
                    "fa-sliders",
                    "fa-share-alt",
                    "fa-share-alt-square",
                    "fa-bomb",
                    "fa-soccer-ball-o",
                    "fa-futbol-o",
                    "fa-tty",
                    "fa-binoculars",
                    "fa-plug",
                    "fa-slideshare",
                    "fa-twitch",
                    "fa-yelp",
                    "fa-newspaper-o",
                    "fa-wifi",
                    "fa-calculator",
                    "fa-paypal",
                    "fa-google-wallet",
                    "fa-cc-visa",
                    "fa-cc-mastercard",
                    "fa-cc-discover",
                    "fa-cc-amex",
                    "fa-cc-paypal",
                    "fa-cc-stripe",
                    "fa-bell-slash",
                    "fa-bell-slash-o",
                    "fa-trash",
                    "fa-copyright",
                    "fa-at",
                    "fa-eyedropper",
                    "fa-paint-brush",
                    "fa-birthday-cake",
                    "fa-area-chart",
                    "fa-pie-chart",
                    "fa-line-chart",
                    "fa-lastfm",
                    "fa-lastfm-square",
                    "fa-toggle-off",
                    "fa-toggle-on",
                    "fa-bicycle",
                    "fa-bus",
                    "fa-ioxhost",
                    "fa-angellist",
                    "fa-cc",
                    "fa-shekel",
                    "fa-sheqel",
                    "fa-ils",
                    "fa-meanpath",
                    "fa-buysellads",
                    "fa-connectdevelop",
                    "fa-dashcube",
                    "fa-forumbee",
                    "fa-leanpub",
                    "fa-sellsy",
                    "fa-shirtsinbulk",
                    "fa-simplybuilt",
                    "fa-skyatlas",
                    "fa-cart-plus",
                    "fa-cart-arrow-down",
                    "fa-diamond",
                    "fa-ship",
                    "fa-user-secret",
                    "fa-motorcycle",
                    "fa-street-view",
                    "fa-heartbeat",
                    "fa-venus",
                    "fa-mars",
                    "fa-mercury",
                    "fa-transgender",
                    "fa-transgender-alt",
                    "fa-venus-double",
                    "fa-mars-double",
                    "fa-venus-mars",
                    "fa-mars-stroke",
                    "fa-mars-stroke-v",
                    "fa-mars-stroke-h",
                    "fa-neuter",
                    "fa-facebook-official",
                    "fa-pinterest-p",
                    "fa-whatsapp",
                    "fa-server",
                    "fa-user-plus",
                    "fa-user-times",
                    "fa-hotel",
                    "fa-bed",
                    "fa-viacoin",
                    "fa-train",
                    "fa-subway",
                    "fa-medium"
                ],
                "KBsize": "337"
            },
            {
                "name": "ET Line",
                "url": "http://goo.gl/fqxVRW",
                "headString": "&lt;link href=&quot;css/et-line-icons.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;",
                "iconPrefix": "et-line-",
                "iconClass": "",
                "icons": [
                    "et-line-mobile",
                    "et-line-laptop",
                    "et-line-desktop",
                    "et-line-tablet",
                    "et-line-phone",
                    "et-line-document",
                    "et-line-documents",
                    "et-line-search",
                    "et-line-clipboard",
                    "et-line-newspaper",
                    "et-line-notebook",
                    "et-line-book-open",
                    "et-line-browser",
                    "et-line-calendar",
                    "et-line-presentation",
                    "et-line-picture",
                    "et-line-pictures",
                    "et-line-video",
                    "et-line-camera",
                    "et-line-printer",
                    "et-line-toolbox",
                    "et-line-briefcase",
                    "et-line-wallet",
                    "et-line-gift",
                    "et-line-bargraph",
                    "et-line-grid",
                    "et-line-expand",
                    "et-line-focus",
                    "et-line-edit",
                    "et-line-adjustments",
                    "et-line-ribbon",
                    "et-line-hourglass",
                    "et-line-lock",
                    "et-line-megaphone",
                    "et-line-shield",
                    "et-line-trophy",
                    "et-line-flag",
                    "et-line-map",
                    "et-line-puzzle",
                    "et-line-basket",
                    "et-line-envelope",
                    "et-line-streetsign",
                    "et-line-telescope",
                    "et-line-gears",
                    "et-line-key",
                    "et-line-paperclip",
                    "et-line-attachment",
                    "et-line-pricetags",
                    "et-line-lightbulb",
                    "et-line-layers",
                    "et-line-pencil",
                    "et-line-tools",
                    "et-line-tools-2",
                    "et-line-scissors",
                    "et-line-paintbrush",
                    "et-line-magnifying-glass",
                    "et-line-circle-compass",
                    "et-line-linegraph",
                    "et-line-mic",
                    "et-line-strategy",
                    "et-line-beaker",
                    "et-line-caution",
                    "et-line-recycle",
                    "et-line-anchor",
                    "et-line-profile-male",
                    "et-line-profile-female",
                    "et-line-bike",
                    "et-line-wine",
                    "et-line-hotairballoon",
                    "et-line-globe",
                    "et-line-genius",
                    "et-line-map-pin",
                    "et-line-dial",
                    "et-line-chat",
                    "et-line-heart",
                    "et-line-cloud",
                    "et-line-upload",
                    "et-line-download",
                    "et-line-target",
                    "et-line-hazardous",
                    "et-line-piechart",
                    "et-line-speedometer",
                    "et-line-global",
                    "et-line-compass",
                    "et-line-lifesaver",
                    "et-line-clock",
                    "et-line-aperture",
                    "et-line-quote",
                    "et-line-scope",
                    "et-line-alarmclock",
                    "et-line-refresh",
                    "et-line-happy",
                    "et-line-sad",
                    "et-line-facebook",
                    "et-line-twitter",
                    "et-line-googleplus",
                    "et-line-rss",
                    "et-line-tumblr",
                    "et-line-linkedin",
                    "et-line-dribbble"
                ],
                "KBsize": "183"
            },
            {
                "name": "Pixeden 7 Stroke",
                "url": "http://goo.gl/lcxupT",
                "headString": "&lt;link href=&quot;css/pe-icon-7-stroke.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot;&gt;",
                "iconPrefix": "pe-7s-",
                "iconClass": "",
                "icons": [
                    "pe-7s-album",
                    "pe-7s-arc",
                    "pe-7s-back-2",
                    "pe-7s-bandaid",
                    "pe-7s-car",
                    "pe-7s-diamond",
                    "pe-7s-door-lock",
                    "pe-7s-eyedropper",
                    "pe-7s-female",
                    "pe-7s-gym",
                    "pe-7s-hammer",
                    "pe-7s-headphones",
                    "pe-7s-helm",
                    "pe-7s-hourglass",
                    "pe-7s-leaf",
                    "pe-7s-magic-wand",
                    "pe-7s-male",
                    "pe-7s-map-2",
                    "pe-7s-next-2",
                    "pe-7s-paint-bucket",
                    "pe-7s-pendrive",
                    "pe-7s-photo",
                    "pe-7s-piggy",
                    "pe-7s-plugin",
                    "pe-7s-refresh-2",
                    "pe-7s-rocket",
                    "pe-7s-settings",
                    "pe-7s-shield",
                    "pe-7s-smile",
                    "pe-7s-usb",
                    "pe-7s-vector",
                    "pe-7s-wine",
                    "pe-7s-cloud-upload",
                    "pe-7s-cash",
                    "pe-7s-close",
                    "pe-7s-bluetooth",
                    "pe-7s-cloud-download",
                    "pe-7s-way",
                    "pe-7s-close-circle",
                    "pe-7s-id",
                    "pe-7s-angle-up",
                    "pe-7s-wristwatch",
                    "pe-7s-angle-up-circle",
                    "pe-7s-world",
                    "pe-7s-angle-right",
                    "pe-7s-volume",
                    "pe-7s-angle-right-circle",
                    "pe-7s-users",
                    "pe-7s-angle-left",
                    "pe-7s-user-female",
                    "pe-7s-angle-left-circle",
                    "pe-7s-up-arrow",
                    "pe-7s-angle-down",
                    "pe-7s-switch",
                    "pe-7s-angle-down-circle",
                    "pe-7s-scissors",
                    "pe-7s-wallet",
                    "pe-7s-safe",
                    "pe-7s-volume2",
                    "pe-7s-volume1",
                    "pe-7s-voicemail",
                    "pe-7s-video",
                    "pe-7s-user",
                    "pe-7s-upload",
                    "pe-7s-unlock",
                    "pe-7s-umbrella",
                    "pe-7s-trash",
                    "pe-7s-tools",
                    "pe-7s-timer",
                    "pe-7s-ticket",
                    "pe-7s-target",
                    "pe-7s-sun",
                    "pe-7s-study",
                    "pe-7s-stopwatch",
                    "pe-7s-star",
                    "pe-7s-speaker",
                    "pe-7s-signal",
                    "pe-7s-shuffle",
                    "pe-7s-shopbag",
                    "pe-7s-share",
                    "pe-7s-server",
                    "pe-7s-search",
                    "pe-7s-film",
                    "pe-7s-science",
                    "pe-7s-disk",
                    "pe-7s-ribbon",
                    "pe-7s-repeat",
                    "pe-7s-refresh",
                    "pe-7s-add-user",
                    "pe-7s-refresh-cloud",
                    "pe-7s-paperclip",
                    "pe-7s-radio",
                    "pe-7s-note2",
                    "pe-7s-print",
                    "pe-7s-network",
                    "pe-7s-prev",
                    "pe-7s-mute",
                    "pe-7s-power",
                    "pe-7s-medal",
                    "pe-7s-portfolio",
                    "pe-7s-like2",
                    "pe-7s-plus",
                    "pe-7s-left-arrow",
                    "pe-7s-play",
                    "pe-7s-key",
                    "pe-7s-plane",
                    "pe-7s-joy",
                    "pe-7s-photo-gallery",
                    "pe-7s-pin",
                    "pe-7s-phone",
                    "pe-7s-plug",
                    "pe-7s-pen",
                    "pe-7s-right-arrow",
                    "pe-7s-paper-plane",
                    "pe-7s-delete-user",
                    "pe-7s-paint",
                    "pe-7s-bottom-arrow",
                    "pe-7s-notebook",
                    "pe-7s-note",
                    "pe-7s-next",
                    "pe-7s-news-paper",
                    "pe-7s-musiclist",
                    "pe-7s-music",
                    "pe-7s-mouse",
                    "pe-7s-more",
                    "pe-7s-moon",
                    "pe-7s-monitor",
                    "pe-7s-micro",
                    "pe-7s-menu",
                    "pe-7s-map",
                    "pe-7s-map-marker",
                    "pe-7s-mail",
                    "pe-7s-mail-open",
                    "pe-7s-mail-open-file",
                    "pe-7s-magnet",
                    "pe-7s-loop",
                    "pe-7s-look",
                    "pe-7s-lock",
                    "pe-7s-lintern",
                    "pe-7s-link",
                    "pe-7s-like",
                    "pe-7s-light",
                    "pe-7s-less",
                    "pe-7s-keypad",
                    "pe-7s-junk",
                    "pe-7s-info",
                    "pe-7s-home",
                    "pe-7s-help2",
                    "pe-7s-help1",
                    "pe-7s-graph3",
                    "pe-7s-graph2",
                    "pe-7s-graph1",
                    "pe-7s-graph",
                    "pe-7s-global",
                    "pe-7s-gleam",
                    "pe-7s-glasses",
                    "pe-7s-gift",
                    "pe-7s-folder",
                    "pe-7s-flag",
                    "pe-7s-filter",
                    "pe-7s-file",
                    "pe-7s-expand1",
                    "pe-7s-exapnd2",
                    "pe-7s-edit",
                    "pe-7s-drop",
                    "pe-7s-drawer",
                    "pe-7s-download",
                    "pe-7s-display2",
                    "pe-7s-display1",
                    "pe-7s-diskette",
                    "pe-7s-date",
                    "pe-7s-cup",
                    "pe-7s-culture",
                    "pe-7s-crop",
                    "pe-7s-credit",
                    "pe-7s-copy-file",
                    "pe-7s-config",
                    "pe-7s-compass",
                    "pe-7s-comment",
                    "pe-7s-coffee",
                    "pe-7s-cloud",
                    "pe-7s-clock",
                    "pe-7s-check",
                    "pe-7s-chat",
                    "pe-7s-cart",
                    "pe-7s-camera",
                    "pe-7s-call",
                    "pe-7s-calculator",
                    "pe-7s-browser",
                    "pe-7s-box2",
                    "pe-7s-box1",
                    "pe-7s-bookmarks",
                    "pe-7s-bicycle",
                    "pe-7s-bell",
                    "pe-7s-battery",
                    "pe-7s-ball",
                    "pe-7s-back",
                    "pe-7s-attention",
                    "pe-7s-anchor",
                    "pe-7s-albums",
                    "pe-7s-alarm",
                    "pe-7s-airplay"
                ],
                "KBsize": "174"
            }
        ]
    }
</script>
<div id="veu" class="vih">
    <div class="nav-container">
    </div>

    <div class="main-container">
    </div>

</div>

<a class="vml vih" href="#" target="_blank">Buy Now</a>

<script src="js/jquery.js"></script>


<script type="text/javascript">
    $(document).ready(function () {

        $(window).unbind('scroll');

        $('.viu').scroll(function () {
            if ($('.viu').scrollTop() > 0) {
                $('.viu nav').addClass('fixed');
            } else {
                $('.viu nav').removeClass('fixed');
            }

            if ($('.viu').scrollTop() > $('.viu nav').outerHeight()) {
                $('.viu nav').addClass('shrink');
            } else {
                $('.viu nav').removeClass('shrink');
            }
        });

        var checkNav = setInterval(function () {
            if ($(this).scrollTop() < 1000) {
                if ($('.viu nav.overlay').length && $('.viu .main-container section:nth-of-type(1) .vnj').length) {
                    $('.vnj').css('top', ($('.viu nav').outerHeight() + 10));
                }
            }
        }, 1000);

        if (!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
            $('.viu').scroll(function () {
                requestAnimationFrame(variantFixedHeader);
            });
        }
    });

</script>


<script>
    function variantFixedHeader() {
        if ($('.viu .fixed-header').length) {
            if ($('.viu').scrollTop() < $('.viu .fixed-header').outerHeight()) {
                var scroll = $('.viu').scrollTop();
                if (scroll < 0) {
                    $('.viu .fixed-header').css({transform: 'translateY(0px)'});
                } else {
                    $('.viu .fixed-header').css({transform: 'translateY(' + scroll / 1.2 + 'px)'});
                }
            }
        } else {
            $('.viu .header').first().css({transform: 'translateY(0px)'});
        }
    }
</script>


<script src="theme/js/skrollr.min.js"></script>
<script src="theme/js/flexslider.min.js"></script>
<script src="theme/js/lightbox.min.js"></script>
<script src="theme/js/twitterfetcher.min.js"></script>
<script src="theme/js/spectragram.min.js"></script>
<script src="theme/js/jquery.plugin.min.js"></script>
<script src="theme/js/countdown.min.js"></script>
<script src="theme/js/smooth-scroll.min.js"></script>
<script src="theme/js/parallax.js"></script>


<script type="text/javascript">
    $(window).load(function () {
        if (window.mr_parallax != undefined) {
            window.mr_parallax.callback = function (element) {
                var navPosition = $('.viu nav').css('position');
                if ((!$(element).hasClass('parallax')) && $(element).is('section:nth-of-type(1), header:nth-of-type(1)')) {
                    $(element).find('.background-image-holder').each(function () {
                        $(this).css('top', '0px');
                        window.mr_parallax.mr_setTranslate3DTransform($(this).get(0), 0);
                    });
                } else if ($(element).hasClass('parallax') && $(element).is('section:nth-of-type(1), header:nth-of-type(1)')) {
                    if (!(navPosition == "absolute" || navPosition == "fixed")) {
                        $(element).find('.background-image-holder').css('top', -($('.viu nav').outerHeight(true)));
                    }
                    else {
                        $(element).find('.background-image-holder').css('top', 0);
                    }
                } else if (!$(element).hasClass('parallax') && !$(element).is('section:nth-of-type(1), header:nth-of-type(1)')) {
                    $(element).find('.background-image-holder').each(function () {
                        $(this).css('top', '0px');
                        window.mr_parallax.mr_setTranslate3DTransform($(this).get(0), 0);
                    });
                } else if ($(element).hasClass('parallax') && !$(element).is('section:nth-of-type(1), header:nth-of-type(1)')) {
                    $(element).find('.background-image-holder').each(function () {
                        $(this).css('top', '0px');
                        window.mr_parallax.mr_setTranslate3DTransform($(this).get(0), 0);
                    });
                }
            };
        }
    });
</script>


<script src="js/alterClass.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/storage2.js"></script>
<script src="js/reInit.js"></script>
<script src="js/simpleModal.js"></script>
<script src="js/jsZip.js"></script>
<script src="js/saveAs.js"></script>
<script src="js/init.js"></script>


<form id="pageuploadfrom" hidden enctype="multipart/form-data" method="post" action="/page/pageUpload.do">
    <input name="id" id="upload_id" type="text" value="<%=id%>">
    <input name="pageZip" id="upload_pageZip" type="text">
</form>
</body>
</html>